html – 如何将选择下拉列表附加到文本框？

2023年9月18日 211次阅读

我正在尝试将选择下拉列表附加到搜索框中.到目前为止,我有点在更大的显示器上工作：

但问题是,当我将浏览器窗口调整为< 1100px宽度,“Everything”被切断： 我尝试应用最小宽度例如150px到下拉列表但它似乎没有任何影响.向容器添加最小宽度有效,但是当我调整窗口大小时,控件会突破到下一行.我猜测我采用的方法(使用嵌套的12列网格,没有排水沟来对齐下拉列表,文本框和按钮)不是正确的方法. FIDDLE：https://jsfiddle.net/jh2fgmo7/

如何将选择下拉列表附加到文本框,但保持最小宽度等于选择框的最大值(仅使用CSS)？

最新情况：

调整大小时,这是所需的结果：

CSS

body {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  font: normal 16px Arial, Helvetica, Verdana, Geneva;
}
body:after {
  content: " ";
  display: block;
  clear: both;
}
.tbnav {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  background: #303030;
  min-height: 55px;
}
.tbnav .logo {
  width: 11.39241%;
  float: left;
  margin-right: 1.26582%;
  margin-left: 3.16456%;
  background: url(/images/tb-logo.gif) no-repeat;
  height: 27px;
  min-width: 150px;
  margin-top: 14px;
}
.tbnav .search {
  width: 62.02532%;
  float: left;
  margin-right: 1.26582%;
}
.tbnav .search .searchcat {
  width: 11.01695%;
  float: left;
  height: 27px;
  margin-top: 11.5px;
}
.tbnav .search .searchcat select {
  height: 33px;
  width: 100%;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.tbnav .search .searchbox {
  width: 78.81356%;
  float: left;
  margin-right: 0;
  margin-left: 0;
  height: 27px;
  padding: 1px;
  padding-left: 5px;
  margin-top: 11.5px;
}
.tbnav .search .searchbtn {
  width: 6.77966%;
  float: left;
  height: 27px;
  margin-top: 11.5px;
}
.tbnav .search .searchbtn input {
  height: 33px;
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="tbnav">
        <div class="logo"></div>
        <div class="search">
            <div class="searchcat">
                <select name="c">
                    <option>Everything</option>
                </select>
            </div>
            <input type="text" name="search" class="searchbox" />
            <div class="searchbtn">
                <input type="submit" class="button button-primary button-small" value="Go" />
            </div>
        </div>
    </div>
</body>
</html>

最佳答案 就个人而言,我会做.searchcat {position：absolute; },将其设置为所需的宽度,然后设置.searchbox {padding-left：/ * whatever * /; }.作为快速解决方案.如果< select>你可能会在那里抛出一些Javascript内容将是可变的(即动态加载),以检查最宽的值是什么.

点赞