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

时间：2015-05-19 16:05:33

标签： html css

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

search box

然而，问题是，当我将浏览器窗口调整为＆lt; 1100px宽度，“Everything”被切断：

search text cut off

我尝试应用min-width例如150px到下拉列表但它似乎没有任何影响。向容器添加min-width可以正常工作，但是当我调整窗口大小时，控件会突破到下一行。我猜测我采用的方法（使用嵌套的12列网格，没有排水沟来对齐下拉列表，文本框和按钮）不是正确的方法。

FIDDLE： https://jsfiddle.net/jh2fgmo7/

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

更新 -

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

search bar desired result

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>

2 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：0)

经过一番摆弄后，我使用了一个基本的表格并用CSS代替它。它现在就像我想要的那样。希望这有助于某人！ （如果有人想要底层的Sass脚本，请告诉我！）

小提琴

http://jsfiddle.net/dzoppzzL/

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: 65px;
}
.tbnav .logo {
  width: 150px;
  float: left;
  margin-right: 1.26582%;
  margin-left: 3.16456%;
  background: url(/images/tb-logo.gif) no-repeat;
  height: 27px;
  margin-top: 19px;
}
.tbnav .search {
  margin-top: 13px;
  border: 0;
  padding: 0;
  border-spacing: 0;
  border-collapse: collapse;
  margin-left: 3.16456%;
  width: 62.02532%;
  float: left;
  margin-right: 1.26582%;
}
.tbnav .search .searchcat {
  height: 35px;
  padding: 0px;
  border-right: 1px solid #808080;
  -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 .searchcat select {
  -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;
  background: #f7f7f7;
  height: 39px;
  width: 150px;
  color: #808080;
  border: 0;
  outline: none;
  box-shadow: none;
}
.tbnav .search .searchtxt {
  width: 100%;
  padding: 0;
}
.tbnav .search .searchtxt .searchbox {
  border: 1px solid #FFF;
  border-left: 0;
  width: 100%;
  min-width: 200px;
  margin-right: 0;
  margin-left: 0;
  height: 35px;
  padding: 1px;
  padding-left: 5px;
  outline: none;
  box-shadow: none;
}
.tbnav .search .searchbtn {
  width: 100px;
  height: 35px;
  padding-left: 5px;
}
.tbnav .search .searchbtn input {
  height: 39px;
  -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 

        <table class="search">
            <tr>
                <td class="searchcat">
                    <select name="c" id="catsel">
                        <option>Everything</option>
                    </select>
                </td>
                <td class="searchtxt">
                    <input type="text" name="search" class="searchbox" />
                </td>
                <td class="searchbtn">
                    <input type="submit" class="button button-primary button-small" value="Go" />
                </td>
            </tr>
        </table>
相关问题
最新问题