大家好,我目前正试图将一个文本框、一个选择菜单和一个按钮干净地放入一个大小的 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;
并没有解决问题。
最佳答案
为了实现您的目标,必须应用一些 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
,很可能在一个或两个浏览器上,样式可能不同。
屏幕截图匹配执行的测试:
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
关于html - html 元素上的边框或填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10668298/