Question

想象一下，您在一行中的一个表单中有两个输入字段。使用语义UI CSS，是否可以仅显式指定第一个输入字段的宽度，然后自动将剩余宽度用于第二个输入字段？假设第一个字段的宽度为3列，那么第二个字段的宽度应为16-3 = 13列-但是，我不想指定13个字段，而是指定“使用剩余宽度”。

这是一个具体的示例：我正在使用语义UI CSS创建包含以下内容的表单

第一行：横跨整个宽度的文本字段“ title”
：文本字段“ description”旁边的日期字段。日期字段是三列宽。旁边的文本字段“描述”应自动使用剩余宽度（十三列）自动（不指定十三列）-可以吗？

下面是一个小提琴，上面显示了结果：https://jsfiddle.net/stefan_at_wpf/rskza3om/4/ 因此，这两个示例的顶部对“描述”文本字段使用了显式的十三列宽度定义。在下面的示例中，如果未明确设置“描述”文本字段的列宽，则可以看到它的样子。是否有类似“剩余的列宽”之类的内容？

对于归档，这是JSFiddle输出的屏幕截图和JSFiddle代码的副本：

<html>

<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>



<div class="ui container">

  <h1>how it shall look like</h1>
  Note that I explicitely defined the width of the date field and description field. I need to know: is there a way to only specify the width of the date field and then use the remaining space for the description field without explicitely defining it as thirteen wide field?
  <form class="ui form">
    <!-- full width text field -->
    <div class="field">
      <input type="text" id="title1" placeholder="title1">
    </div>


    <div class="two fields">

      <!-- three wide field -->
      <div class="three wide field">
        <label for="theDate1"></label>
        <input type="date" id="theDate1">
      </div>

      <!-- remaining width: explicitely defined (thirteen) in this case - is there something like "use remaining grid space"? -->
      <div class="thirteen wide field">
        <label for="description1"></label>
        <input type="text" id="description1" placeholder="description1">
      </div>
    </div>
  </form>

  <h1>how it looks if one only defines the width of the date field</h1>
  any way to tell: "description field shall take the full remaining width ?"
  <form class="ui form">
      <!-- full width text field -->
      <div class="field">
        <input type="text" id="title2" placeholder="title2">
      </div>


      <div class="two fields">

        <!-- three wide field -->
        <div class="three wide field">
          <label for="theDate2"></label>
          <input type="date" id="theDate2">
        </div>

        <!-- width not explicetely defined -->
        <div class="field">
          <label for="description"></label>
          <input type="text" id="description2" placeholder="description2">
        </div>
      </div>
    </form>


</div>

</html>

自动使用网格中的剩余宽度

0 个答案: