gpt4 book ai didi

html - 根据兄弟元素的宽度调整选择元素的宽度

转载 作者:太空宇宙 更新时间:2023-11-04 09:36:04 27 4
gpt4 key购买 nike

我在设置选择元素 (html) 的宽度时遇到问题。问题可以分解为 2 个部分:

  • 选择元素的宽度 = 2 个输入元素的总宽度。
  • 当其中一个输入元素的宽度发生变化时 = 选择元素的宽度会自动调整。

是否可以只用纯 CSS 来解决这个问题?

<!DOCTYPE html>
<html>
<body>
<div style="display: inline-block; background: blue;">

<select>
<option value="volvo">Volvo Volvo Volvo Volvo Volvo Volvo </option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<br>

<input size="8" type="text" value="hej">
<input size="8" type="text" value="hej">

</div>

</body>
</html>

编辑请注意,输入元素具有属性“size="8"”。我希望它们具有那种尺寸,因为元素的其余部分具有那种外观。因此,只有选择元素的大小应该缩小/增大。

最佳答案

是这样的吗?

我所做的是将两个输入元素放置为 select 标记的同级元素。并使选择标签相对于其父级即 div 的绝对位置。只有当我们知道/可以控制 select 标签的高度时,这才有效。

我将 padding-top 应用于 div,它必须等于选择标签的高度。

select {
width: 100%;
display: block;
position: absolute;
height: 30px;
top: 0px;
}
div {
position: relative;
padding-top: 30px;
}
<!DOCTYPE html>
<html>
<body>
<div style="display: inline-block; background: blue;">
<select>
<option value="volvo">Volvo Volvo Volvo Volvo Volvo Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input size="8" type="text" value="hej">
<input size="8" type="text" value="hej">
</div>
<br>
</div>
</body>
</html>

关于html - 根据兄弟元素的宽度调整选择元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40320259/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com