文章/答案/技术大牛

发布

问输入字段不响应flexbox
EN

Stack Overflow用户

提问于 2020-09-17 23:26:49

回答 2查看 97关注 0票数 2

我想为我正在构建的产品计算器创建9个输入字段。我想要三行三列。然而，由于某些原因，当我将display: flex和flex-direction: row应用于父div时，这并不起作用。我的所有输入字段都放在一个列中，而不考虑弹性方向，并且输入大小调整不起作用

我做错了什么？

谢谢。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.survery-questions {
    display: flex;
    flex-direction: row;
}

.home-price-footer {
    width: 25%;
    height: 45px;
    margin-bottom: 3em;
}


#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

<html>
<head>
</head>
<body>
<div class="survery-questions">
        <form action="">
            <div class="price-form">
                <input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
            </div>
            
                   <div class="price-form">
                <input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
            </div>
                   <div class="price-form">
                <input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
            </div>
        
                </form>
       </div>
       
        </form>
       </div>
       
      </body>
      </html>

html

css

回答 2

Stack Overflow用户

发布于 2020-09-18 00:42:19

保持你的html完好无损，在你给display:flex的地方需要一点修改，基本上display:flex只适用于直接的子代，而不是子代，所以.survey-questions的直接子代是<form>和<div>是<form>的子代，因此我在你现有的选择器中添加了form，并给出了一个额外的属性flex-wrap:wrap来维护你所期望的行和列的布局。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* just a little modification in this part */
.survery-questions form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
form > div{
    width: 33.3%;
}

.home-price-footer {
    width: 25%;
    height: 45px;
    margin-bottom: 3em;
}


#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

<html>
<head>
</head>
<body>
<div class="survery-questions">
        <form action="">
            <div class="price-form">
                <input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
            </div>
            
                   <div class="price-form">
                <input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
            </div>
                   <div class="price-form">
                <input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
            </div>
        
                </form>
       </div>
       
        </body>
        </html>

票数 1

Stack Overflow用户

发布于 2020-09-17 23:30:53

<form>元素是flex容器的唯一子元素，因此也是唯一受其影响的元素。通过将它移到flex容器之外，事情就更接近于你想要的行为了。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.survey-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* added */
}

.survey-questions > div {
    width: 33.33%; /* added */
    padding: 0 10px; /* added */
}

.home-price-footer {
    width: 100%; /* updated */

    height: 45px;
    margin-bottom: 3em;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

<form action="">
    <div class="survey-questions">
        <div class="price-form">
            <input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>
        </div>

        <div class="phone-form">
            <input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
        </div>

        <div class="email-form">
            <input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
        </div>

        <div class="price-form">
            <input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>
        </div>

        <div class="phone-form">
            <input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
        </div>

        <div class="email-form">
            <input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
        </div>

        <div class="price-form">
            <input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>
        </div>

        <div class="phone-form">
            <input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
        </div>

        <div class="email-form">
            <input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
        </div>
    </div>
</form>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63941335

复制

相似问题

问输入字段不响应flexbox
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入字段不响应flexboxEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入字段不响应flexbox
EN