Question

我想插入行内输入并将它们与一些文本分开。原因是我希望用户输入开始时间和结束时间，并使输入彼此相对靠近，因此外观看起来令人满意。我目前尝试使用行和列来实现此目的，但是由于列的原因，文本之间的宽度相当大。下面是一些代码，可以让我了解一下我的尝试。有其他选择吗？

<div class = "w3-row">
   <div class="w3-col w3-container s3 m3 l3">
     <div style="text-align:right">
       <label for="hours-operation-s" class="register-labels">Hours of Operation:</label>
     </div>
   </div>
   <div class="w3-col w3-container s2 m2 l2" id="div-start-time">
     <input type="text" name="hours-operation-s" class="w3-input" required>
   </div>
   <div class="w3-col w3-container s2 m2 l2">
     <div class="" style="text-align:center; padding-top:5px;">
       <p><strong>to</strong></p>
     </div>
   </div>
   <div class="w3-col w3-container s2 m2 l2">
     <input type="text" class="w3-input" required>
   </div>
   <div class = "w3-col w3-container s3 m6 l3">
     <!-- Blank -->
   </div>
</div>

Answer 1

使用Flexbox非常简单。

Bootstrap将整个平台从Bootstrap3重新分配到Bootstrap4的原因，主要是从使用浮动转换为flexbox。

Flexbox需要做两件事：

父容器（例如DIV，剖面，侧面，p等）
一个或多个子元素（例如div，p，img等）

您在父级上打开弹性框：display:flex;

然后，有各种开关。有些设置在父项上（例如justify-content），而有些设置在项上（例如flex-grow:1）

演示：

.row{display:flex;}
.col-inline{flex:1;XXXborder:1px solid red;}
.col-left {max-width:45vw;text-align:right;}
.col-right{max-width:48vw;text-align:left;}
.col-to{max-width:5vw;text-align:center;}
.w3-input{width:80px;text-align:center;}

<div class="row">
    <div id="div-start-time" class="col-left col-inline">
        <label for="hours-operation-s" class="register-labels">
            Hours of Operation:
            <input type="text" id="hours-operation-s" class="w3-input" placeholder="9AM" required>
        </label>
    </div>
    <div class="col-to col-inline">
        to
    </div>
    <div id="div-end-time" class="col-right col-inline">
            <input type="text" id="hours-operation-e" class="w3-input" placeholder="6PM" required>
    </div>
</div>

参考文献：

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet for Flexbox。

观看该教程，从现在开始的30分钟内，您的问题将得到解决-并且您将了解flexbox。

_{P.S。我与该视频或其演示者没有任何联系-很幸运，我发现了它，现在将其传递了。}

由文本分隔的两个内联输入

1 个答案:

演示：

参考文献：