Question

我需要你的帮助。出于某种原因，我似乎无法让我的边框与其父元素无缝对齐。下面的例子描述了我遇到的问题：

以下是所需结果的图示：

我猜我不能那么遥远。也许一双新鲜的眼睛可以解决手头的问题。

这是HTML＆amp;有问题的CSS：

<!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="&#9660;" id="btn_arrow">
    </dt>
    <dd>
        <ul id="recent"></ul>
    </dd>
</div>

<div><input type="button" id="search" value="search"></div>

</body>

</html>

Answer 1

.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 */
    ...
}

<强> Demo

尝试修复损坏的UL边界

1 个答案: