Question

当我在容器中有一组Span元素时，它们从左到右堆叠（必要时转到下一行），更重要的是，每个元素的宽度根据多少自动设置内容就在其中。

有没有办法用textfield元素（具有初始值）而不是跨度来实现类似的效果？自动调整的宽度至关重要，即我希望文本字段与其初始值所需的宽度一样宽。我知道这可以在某种程度上在JS中实现，但我更喜欢CSS解决方案。

（我已经看了其他问题，但它们似乎都针对文本字段宽度应该动态变化的情况，而不是根据初始值设置。）

Answer 1

我不确定你能用css，但你可以使用javascript！循环每个输入字段并设置相对于值字符串长度的大小。

$('.in').each(function(i, obj) {
   $(obj).attr('size', $(obj).val().length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="test 1" class="in">
<input type="text" value="test 12123131" class="in">
<input type="text" value="test 1414151555151" class="in">
<input type="text" value="test 1123" class="in">
<input type="text" value="test 312321" class="in">

或者，即使是下面这个不稳定的解决方法Auto-scaling input[type=text] to width of value?也是该页面上的建议示例

span {
border:1px inset #ddd;
padding:2px;
}

<span contenteditable="true">dummy text</span>
<span contenteditable="true">possible</span>
<span contenteditable="true">duplicate</span>
<span contenteditable="true">haha</span>
<span contenteditable="true">go and view this solution</span>
<span contenteditable="true"><a target="_blank" href="https://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value">https://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value</a></span>

基于CSS中的初始值设置的文本字段宽度

1 个答案: