时间戳

首页 > 解决方案 > 如何使单个标签的内容相等？

html - 如何使单个标签的内容相等？

问题描述

这是一个 react.js 应用程序。我希望我的输出看起来像这样： 目标输出

但我有这个输出：

我的输出

我已经在我的 CSS 中尝试了 text-indent 和 space-between ，但它不起作用。

这是我的 HTML 代码：

为修复进度添加项目 
        <div className="AddItemDiv">
          <span className="spanItem"> Ticket No: <strong>170</strong> </span> 
               <br/><br/>

              <span className="spanItem">
                 Issue: <strong>Cannot Login in Inventory System</strong>
              </span> 
               <br/><br/>

            <span className="spanItem"> Status:
             <select>
               <option selected value="">First Choice</option>
               <option value="">Second Choice</option>
               <option value="">Third Choice</option>
               <option value="">Fourth Choice</option>
             </select>
           </span>

         <br/><br/>
         <span className="spanItem"> PIC:
           <select>
           <option selected value="">First Choice</option>
           <option value="">Second Choice</option>
           <option value="">Third Choice</option>
           <option value="">Fourth Choice</option>
         </select>
       </span>
     <br/><br/>

     <span className="spanItem">
       Remarks: <input type="text" name="name" />
     </span>
  <br/>

标签： htmlcssreactjs

解决方案

您可以使用布局为 的网格系统2 columns，也可以在这种情况下放弃使用标签，当您有文本、短语、诗歌等需要在文本中换行的内容时<br />，更喜欢使用标签。<br >

这是一个网格系统的基本示例：

.ticket-form {
  max-width: 400px;
  display: grid;
  grid-template: auto / 150px 1fr;
  gap: 10px;
}
<div class="ticket-form">
    <label for="ticket-no">Ticket No:</label>
    <output id="ticket-no">170</output>

    <label for="issue">Issue:</label>
    <output id="issue">Cannot login in Inventory System</output>

    <label for="status">Status:</label>
    <select id="status">
        <option selected></option>
    </select>

    <label for="pic">PIC:</label>
    <select id="pic">
        <option selected></option>
    </select>

    <label for="remarks">Remarks:</label>
    <textarea id="remarks"></textarea>

    <label>Important</label>
    <div data-comment="multi elements in right">
        <div>if you have more that 1 element you must wrap with a div to mantain the grid flow</div>
        <div>or use another solution, the div wrapping the line with flex or something else</div>
    </div>
</div>

此处有关网格的更多信息：https ://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

下面是一个使用 div 来换行和使用 flex 系统来控制其内部间距的示例：

.input-wrapper {
    margin: 5px;
    display: flex;
    width: 400px;
}

/* use a fixed width label */
.input-wrapper label {
  width: 150px;
}

.input-wrapper textarea, 
.input-wrapper input,
.input-wrapper select {
  flex-grow: 1;
}
<div>
    <div class="input-wrapper">
        <label for="ticket-no">Ticket No:</label>
        <output id="ticket-no">170</output>
    </div>
    <div class="input-wrapper">
        <label for="issue">Issue:</label>
        <output id="issue">Cannot login in Inventory System</output>
    </div>
    <div class="input-wrapper">
        <label for="status">Status:</label>
        <select id="status">
            <option selected></option>
        </select>
    </div>
    <div class="input-wrapper">
        <label for="pic">PIC:</label>
        <select id="pic">
            <option selected></option>
        </select>
    </div>
    <div class="input-wrapper">
        <label for="remarks">Remarks:</label>
        <textarea id="remarks"></textarea>
    </div>
</div>

display: inline-block当然，在or的帮助下还有其他解决方案float: left，我个人认为 grid 或 flex 是更好的选择。

推荐阅读