gpt4 book ai didi

html - 我怎样才能使跨度和输入彼此相邻并共同占据包含 div 宽度的 100%?

转载 作者:太空狗 更新时间:2023-10-29 13:20:54 24 4
gpt4 key购买 nike

我有以下片段:

<html>
<body>
<div style="width: 700px;">
<span>test</span>
<input style="width: 100%;"></input>
</div>
</body>
</html>

但这并不符合我的要求。我希望 span 和 input 一起占 div 的 100%,即输入将从 span 结束的地方开始并填充直到 div 的宽度,而不会中断到下一行。我该怎么做?

最佳答案

如果您需要适当的流体宽度:

参见: http://jsfiddle.net/kxEML/

CSS:

.inputContainer {
width: 300px;
border: 1px dashed #f0f
}
.inputContainer label {
float: left;
margin-right: 5px;
background: #ccc
}
.inputContainer div {
overflow: hidden;
}
.inputContainer input {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block
}

HTML:

<div class="inputContainer">
<label>test</label>
<div><input /></div>
</div>

关于html - 我怎样才能使跨度和输入彼此相邻并共同占据包含 div 宽度的 100%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6526970/

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