gpt4 book ai didi

html - CSS:如何使输入填充行的其余部分,右边有一个按钮?

转载 作者:太空宇宙 更新时间:2023-11-03 23:26:38 24 4
gpt4 key购买 nike

http://jsfiddle.net/0hr4m9y6/

我有一个选择下拉菜单 + 一个文本输入字段,它们都属于一个 div,这样我就可以在这两个东西周围加上边框。在这个 div 的绝对右侧应该是一个显示“搜索”的按钮(没有边框)

我在将所有 3 个(选择、文本输入、搜索)都放在同一行时遇到问题,输入从选择下拉列表旁边一直延伸到搜索按钮旁边的右侧。

HTML

    <div class="blah">
<div class="lineContainer">
<div class="left">
<select>
<option value="zzz">zzz</option>
</select>

</div>
<div class="right">
<input type="text" id="text">
</div>
</div>

<input type="submit" value="Search">

</div>

CSS:

    .lineContainer {
display: inline-block;
border: 1px solid #000
}
.lineContainer div {
height: 30px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}

#text {
width: 100%;
}

.blah {
width: 100%;
}

如果你看一下 fiddle ,你会发现我几乎掌握了它,但输入没有延伸到屏幕/窗口的宽度。我希望它一直延伸,搜索是这条线上最右边的东西。

最佳答案

http://jsfiddle.net/0hr4m9y6/1/

HTML:

<div class="blah">
<div class="lineContainer">
<div class="left">
<select>
<option value="zzz">zzz</option>
</select>

</div>
<div class="right">
<input type="text" id="text">
</div>
</div>

<input type="submit" value="Search">

CSS:

</div>
.lineContainer {
display: inline-block;
border: 1px solid #000
}
.lineContainer div {
height: 30px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}

#text {
width: 100%;
}

.blah {
width: 100%;
display: flex;
}
.lineContainer {
flex: 1;
}

上述解决方案使用了 flexbox。它更易于使用,但仅与 IE10+ 兼容。如果你想要 IE 兼容性,试试这个:

http://jsfiddle.net/0hr4m9y6/5/

HTML:

<div class="blah">
<div class="lineContainer">
<div class="left">
<select>
<option value="zzz">zzz</option>
</select>

</div>
<div class="right">
<input type="text" id="text">
</div>
</div>

<input type="submit" value="Search">

</div>

CSS:

.lineContainer {
display: inline-block;
border: 1px solid #000
}
.lineContainer div {
height: 30px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}

#text {
width: 100%;
}

.blah {
width: 100%;
}
.lineContainer {
width:90%;
}
input[type="submit"] {
width:9%;
vertical-align:top;
}

注意:您可以将 width:10%; 设置为提交按钮,只需给它一个 box-sizing:border-box;

关于html - CSS:如何使输入填充行的其余部分,右边有一个按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26686101/

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