屏幕截图与在：

Question

嘿伙计我正在尝试将文本框中的一个选择菜单和一个按钮全部放入一个大小的div干净但是我遇到一个问题，其中每个元素都有奇数边框/边距，这会阻止它正确呈现（按钮出现在文本框并选择菜单）

继承人正在使用的HTML

<div class="content">
    <div class="search-panel">
        <div class="search-panel-logo">
            <img src="img.png" class="search-panel-logo-img" />
        </div>

        <div class="search-panel-searchbar">
            <form class="search-panel-frm" action="" id="fsearchbar">
                <input class="search-panel-frm" type="text" id="tseachtext" name="tsearchtext" value="Search" />
                <select class="search-panel-frm" id="ssearchselect" name="ssearchselect">
                    <option value="Cars">Cars</option> 
                </select>
                <input class="search-panel-frm" type="button" id="bsearchgo" name="bsearchgo" value="Search!" />
            </form>

        </div>
    </div>
</div>

并且继承了CSS：

.content {
    background:inherit;
    width:950px;
    height:600px;
    margin: 0 auto;
}

.search-panel {
    width:inherit;
    height:500px;
    background:#093;
    margin:0 auto;

}
.search-panel-searchbar {
    width:inherit;
    height:30px;

}

.search-panel-searchbar-frm {
    width:inherit;
    height:inherit;

}

.search-panel-searchbar-frm-text {
    width:60%;
    height:70%;

}

.search-panel-searchbar-frm-select {
    width:20%;
    height:80%;

}

.search-panel-searchbar-frm-go {
    width:20%;
    height:80%;

}

任何想法我可以添加以使所有元素出现在一行而不是两行，我已经尝试了

border:0;
margin:0;

并没有解决问题。

Answer 1

删除元素之间的空格。

另外，使用width: inherit可能不是一个好主意 - 请尝试使用width: 100%或其他内容。 height: inherit可以替换为height: auto;（或者只是省略）。

Answer 2

您发布了一些不适用于您发布的HTML的CSS类（例如.search-panel-searchbar-frm-go）
您正在将类search-panel-frm应用于表单元素以及表单中的元素。你确定这是你想要的吗？
我没有看到同样的问题：输入，选择和输入：按钮对我来说都出现在同一行。

你可以尝试添加这个简单的修复程序，将所有内容保存在一行，这可能会给你一些想法。

.search-panel-frm *
{
 white-space:nowrap;
}

如果所有元素已经在同一行，并且您希望它们排列更好，请尝试使用不同的vertical-align值，例如：

.search-panel-frm *
{
 vertical-align:top;
}

Answer 3

为了实现你的目标，必须应用一些CSS技巧，见CSS下面：

<强> CSS

/* wrapper */
.search-panel-searchbar {
    width: 100%;
    height: 30px;
    overflow: hidden;
}

/* form elements must be wrapped and not a direct child of the form tag */
.search-panel-searchbar > form > div {
    background-color: #fff;
    width: 100%;
    height:30px;
}

/* input[type="text"] */
.search-panel-searchbar-frm-text {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 16px;
    height: 16px;  /* necessary to fix height issue on windows browsers */
    padding: 6px 0;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 60%;
    text-indent: 4px;
    float: left;
}

/* select */
.search-panel-searchbar-frm-select {
    margin: 0;
    padding: 0;
    font-size: 12px;
    height: 30px;
    padding: 6px 4px;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 20%;
    float: left;
    margin-left:-1px; /* pull to prevent border overflow issue with % */
}

/* input[type="button"] */
.search-panel-searchbar-frm-go {
    margin: 0;
    padding: 0;
    font-size: 12px;
    height: 30px;
    padding: 6px 0;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 20%;
    float: left;
    text-align:center;
    margin-left:-1px; /* pull to prevent border overflow issue with % */
    cursor: pointer;
}

注意：

CSS不包括Fiddle示例中给出的可视演示样式，如按钮悬停和正文背景。

请注意，不幸的是，每个浏览器（和操作系统！）都以不同的方式处理select，并且可能在一两个浏览器上，样式可能会有所不同。

working Fiddle example!

enter image description here

屏幕截图与在：

上执行的测试相匹配

Linux Ubuntu 12.04

Firefox 12.0
Chromium 18.0.1025.151（Developer Build 130497 Linux）

Windows XPProfissionalversão2002Service Pack 3

Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2 ^{（仅选择框高度失败）}
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4 ^{（由于字体系列而失败）}

Windows 7 Home Edition Service Pack 1

Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m

您将使用的font-family必须在末尾包含字体系列声明，以防止出现行高和文字大小问题。例如，font-family: Helvetica, Arial, sans-serif

边框或填充html元素的问题

3 个答案:

屏幕截图与在：