时间戳

首页 > 解决方案 > 由文本分隔的两个内联输入

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

问题描述

我想将输入内联并用一些文本分隔它们。这样做的原因是我希望用户输入开始时间和结束时间，并让输入彼此相对接近，以便在视觉上看起来令人愉悦。我目前尝试使用行和列来实现这一点，但是由于列的原因，文本之间的宽度相当大。下面是一些代码，可以让我了解我的尝试。有没有其他选择？

<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>

标签： htmlcss

解决方案

使用 Flexbox 非常简单。

Bootstrap 将他们的整个平台从 Bootstrap3 重做为 Bootstrap4 是有原因的，主要是为了从使用浮点数改为使用 flexbox。

Flexbox 需要两件事：

  1. 父容器（例如 DIV、section、aside、p 等）

  2. 一个或多个子元素（例如 div、p、img 等）

你在父节点上打开 flexbox ：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 教程 - 快节奏和同类最佳

这是Flexbox 的一个很棒的备忘单。

观看教程，从现在起 30 分钟内，您的问题将得到解决——您将了解 flexbox。

PS 我与视频或它的演示者没有任何联系——我很幸运地发现了它，现在把它传递下去。

推荐阅读