Question

我得到一个ul和li条目，其中包含带有文本和输入字段的标签。 ul的宽度为所包含div的100％。 div宽度可以更改，我也想更改输入的大小。

输入的大小应相同，以增加列表的宽度。由于li具有不同的宽度，根据列表上的级别，我无法使用％宽度（对吗？）。有办法吗？最好是纯CSS。

我尝试了这种行为的例证：

- Text1     [Input]
- Text2     [Input]
  - Text3   [Input]
- Text4     [Input]

当窗口变宽时，它应如下所示：

- Text1     [    Input  ]
- Text2     [    Input  ]
  - Text3   [    Input  ]
- Text4     [    Input  ]

Answer 1

没有看到真实的代码，这有点困难，但是您可以使用width％

尝试类似

label, input {
width:45%;
display:inline-block;
padding:0px 2% 5px;
}

您可能需要使用响应式CSS查询，以使其堆叠并在小型设备上更宽。或者也许尝试最小宽度以确保它们不会收缩太多。

Answer 2

使用FLEX：

.ur_beloved_class li {display:flex}
.ur_beloved_class label {width:10em}
.ur_beloved_class input {flex-grow:1}

<ul class="ur_beloved_class">
  <li><label>input1 blah blah</label><input type="text"></li>
  <li><label>input1</label><input type="text"></li>
  <li><label>input1</label><input type="text"></li>
  <li><label>input1</label><input type="text"></li>
</ul>

没有灵活性： 如果输入宽度应取决于窗口（视口）的宽度，使用：

.ur_beloved_class li input {
   width: 60vw; /* Viewport Width */
}

如果窗口太窄，可能会使标签混乱。所以，

.ur_beloved_class li label {
    min-width:10em; /* Font size relative */
}

这两个与float:left或display:inline-block一起应提供期望的结果（在大多数情况下）。最好有一些示例代码。

在ul中更改输入的宽度

2 个答案: