Html 试图修复破损的UL边界
我需要你的帮助。出于某种原因，我似乎无法使边框与其父元素无缝对齐。下面的示例描述了我遇到的问题： 以下是所需结果的图纸： 我猜我不会走那么远。也许一双新的眼睛可以解决眼前的问题 以下是所讨论的HTML和CSS：Html 试图修复破损的UL边界,html,css,html-lists,Html,Css,Html Lists,我需要你的帮助。出于某种原因，我似乎无法使边框与其父元素无缝对齐。下面的示例描述了我遇到的问题： 以下是所需结果的图纸： 我猜我不会走那么远。也许一双新的眼睛可以解决眼前的问题 以下是所讨论的HTML和CSS： <!DOCTYPE html> <html> <head> <style type="text/css"> * { font-family: Segoe UI; font-size: 9pt; } .dropdow
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.dropdown dd, .dropdown ul {
margin: 0px;
padding: 0px;
}
.dropdown dd {
position: relative;
}
.dropdown:hover {
color:#5d4617;
}
.dropdown dt {
border:1px solid rgb(180,180,180);
width: 170px;
position: relative;
border-radius: 2px;
padding: 1px;
}
.dropdown dt:hover, .dropdown dt:focus {
color:#5d4617;
border-color: rgb(180,180,180);
}
.dropdown dt input[type=text] {
border: 0;
width: 100%;
box-sizing: border-box;
}
.dropdown dt input[type=button] {
border: 0;
width: 15px;
height: 18px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.dropdown dd ul {
border-left:1px solid rgb(180,180,180);
border-right:1px solid rgb(180,180,180);
border-bottom:1px solid rgb(180,180,180);
border-top:1px solid #FFF;
color: #000;
display: block;
left: 0px;
top: -1px;
padding: 1px;
position:absolute;
width:auto;
min-width: 170px;
list-style:none;
cursor: pointer;
}
.dropdown dd ul li {
padding: 2px;
display: block;
}
.dropdown dd ul li:hover {
background-color: rgb(232,232,232);
font-weight: bold;
}
#field_img {
position:absolute;
left:0px;
top:2px;
}
#fileno {
padding-left: 18px;
}
/*CSS STYLING FOR BUTTONS */
input[type="button"] {
cursor:pointer;
border: 1px solid #707070;
background-color: #F0F0F0;
border-radius: 4px;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
padding: 3px 6px;
}
input[type="button"]:hover {
cursor:pointer;
background-color: #EAF6FD;
border: 1px solid #3C7FB1;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled], input[type="button"][disabled]:hover {
border: 1px solid #ADB2B5;
text-shadow: 1px 1px #fff;
cursor:default;
background-color: #F4F4F4;
box-shadow: inset 0 1px 2px #fff;
}
</style>
</head>
<body>
<div style="float: left;" class="dropdown">
<dt>
<img src="glass.png" id="field_img">
<input id="fileno" type="text">
<input type="button" value="▼" id="btn_arrow">
</dt>
<dd>
<ul id="recent"></ul>
</dd>
</div>
<div><input type="button" id="search" value="search"></div>
</body>
</html>
* {
字体系列：SegoeUI；
字号：9pt；
}
.下拉列表dd.下拉列表ul{
边际：0px；
填充：0px；
}
.下拉列表dd{
位置：相对位置；
}
.下拉列表：悬停{
颜色：#5d4617；
}
.下拉列表dt{
边框：1px实心rgb（180180）；
宽度：170px；
位置：相对位置；
边界半径：2px；
填充：1px；
}
.dropdown dt:悬停，.dropdown dt:焦点{
颜色：#5d4617；
边框颜色：rgb（180180）；
}
.下拉式dt输入[类型=文本]{
边界：0；
宽度：100%；
框大小：边框框；
}
.下拉式dt输入[类型=按钮]{
边界：0；
宽度：15px；
高度：18px；
保证金：0；
填充：0；
位置：绝对位置；
排名：0；
右：0；
}
.下拉菜单dd ul{
左边框：1px实心rgb（180180）；
右边框：1px实心rgb（180180）；
边框底部：1px实心rgb（180180）；
边框顶部：1px实心#FFF；
颜色：#000；
显示：块；
左：0px；
顶部：-1px；
填充：1px；
位置：绝对位置；
宽度：自动；
最小宽度：170px；
列表样式：无；
光标：指针；
}
.下拉列表dd ul li{
填充：2px；
显示：块；
}
.下拉列表dd ul li:悬停{
背景色：rgb（232232）；
字体大小：粗体；
}
#现场检查{
位置：绝对位置；
左：0px；
顶部：2个；
}
#文件号{
左侧填充：18px；
}
/*按钮的CSS样式*/
输入[type=“button”]{
光标：指针；
边框：1px实心#707070；
背景色：#f0；
边界半径：4px；
盒影：插入0 1px 2px#fff，插入0-0.7em#DDD；
背景图像：-ms线性渐变（顶部，#f1f10%，#e3 50%，#d0 100%）；
填充：3px6px；
}
输入[type=“button”]：悬停{
光标：指针；
背景色：#EAF6FD；
边框：1px实心#3C7FB1；
盒影：插入0 1px 2px#fff，插入0-0.7em#BEE6FD，0 0 3px#A7D9F5；
}
输入[type=“button”][禁用]，输入[type=“button”][禁用]：悬停{
边框：1px实心#ADB2B5；
文本阴影：1px 1px#fff；
游标：默认值；
背景色：#F4；
盒影：插入0 1px 2px#fff；
}
.下拉列表dt{
边框：1px实心rgb（180、180、180）；
边框底部：0；/*你能用这把小提琴来显示问题吗？好的，请看：问题是左边框的1px间隙？
.dropdown dt {
border:1px solid rgb(180, 180, 180);
border-bottom: 0; /* << ------------------------ fix here */
...
}
.dropdown dd ul {
border-left:1px solid rgb(180, 180, 180);
border-right:1px solid rgb(180, 180, 180);
border-bottom:1px solid rgb(180, 180, 180);
border-top: 0; /* << ------------------------ fix here */
...
}