html - html 元素上的边框或填充问题

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

为了实现您的目标，必须应用一些 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!

屏幕截图匹配执行的测试:

Linux Ubuntu 12.04

• 火狐 12.0
• Chromium 18.0.1025.151(开发人员内部版本 130497 Linux)

Windows XP Profissional versão 2002 Service Pack 3

• Internet Explorer 8.0.6001.18702
• 歌剧 11.62
• 火狐 3.6.16
• Safari 5.1.2 ^{(仅选择框高度失败)}
• 谷歌浏览器 18.0.1025.168 m
• K-Meleon 1.5.4 ^{(由于字体系列而失败)}

Windows 7 家庭版服务包 1

• Internet Explorer 9.0.8112.164211C
• 歌剧 11.62
• 火狐 12.0
• Safari 5.1.4
• 谷歌浏览器 18.0.1025.168 m

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