Css 边框顶部在第一个子对象内部工作，但边框底部不工作

我试图学习一些CSS，但我有点麻烦

在我的项目中，我有一个带有“ui自动完成”的搜索栏，它可以工作，但是我试图编辑“返回框”的样式，并且遇到了一些问题

现在，我的自动完成结果框没有显示边框底部，我正在尝试解决这个问题。当我在最后一个孩子里面输入border-bottom:10px时，我没有成功，但当我在第一个孩子里面输入border-top:10px时，我成功了

CSS:

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

ul.ui-autocomplete{
    border-top: 0px solid rgb(223, 223, 223) !important;
    border-radius: 0px;
    -moz-border-radius: 0px;
}

ul.ui-autocomplete li:first-child{
    /* border-top: 10px solid rgb(223, 223, 223); */
}

ul.ui-autocomplete li:last-child{
    border-bottom: 10px solid rgb(223, 223, 223);
}

.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    float: left;
    clear: left;
    width: 100%;
    height: 30px;
}

.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    border: 0px;
    height: 32px;
} 

.ui-state-focus, .ui-menu .ui-menu-item a:hover,
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    background: rgb(223, 223, 223);
    background-image: none !important;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
    zoom: 0%;
    outline: none;
    margin: 0px;
    padding: 0px;
    display: block;
    line-height: 1.0;
    font-weight: normal;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    min-height: 0;
    color: #000;
}

<form action="" method="post" id="search_bar">
  <input type="search" name="search" class="giant-input" autofocus list="hashtags" size="60" />
</form>

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    // padding: 0px; -- Here's the problem
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

Html:

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

ul.ui-autocomplete{
    border-top: 0px solid rgb(223, 223, 223) !important;
    border-radius: 0px;
    -moz-border-radius: 0px;
}

ul.ui-autocomplete li:first-child{
    /* border-top: 10px solid rgb(223, 223, 223); */
}

ul.ui-autocomplete li:last-child{
    border-bottom: 10px solid rgb(223, 223, 223);
}

.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    float: left;
    clear: left;
    width: 100%;
    height: 30px;
}

.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    border: 0px;
    height: 32px;
} 

.ui-state-focus, .ui-menu .ui-menu-item a:hover,
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    background: rgb(223, 223, 223);
    background-image: none !important;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
    zoom: 0%;
    outline: none;
    margin: 0px;
    padding: 0px;
    display: block;
    line-height: 1.0;
    font-weight: normal;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    min-height: 0;
    color: #000;
}

<form action="" method="post" id="search_bar">
  <input type="search" name="search" class="giant-input" autofocus list="hashtags" size="60" />
</form>

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    // padding: 0px; -- Here's the problem
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

我做错什么了吗？我能做些什么来解决这个问题？

我找到了解决方案！ 我在我的代码中用穷尽法进行了证明，我发现了问题的根源。这只是（我不知道为什么）一个填充：0px的问题

我的原始代码：

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

ul.ui-autocomplete{
    border-top: 0px solid rgb(223, 223, 223) !important;
    border-radius: 0px;
    -moz-border-radius: 0px;
}

ul.ui-autocomplete li:first-child{
    /* border-top: 10px solid rgb(223, 223, 223); */
}

ul.ui-autocomplete li:last-child{
    border-bottom: 10px solid rgb(223, 223, 223);
}

.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    float: left;
    clear: left;
    width: 100%;
    height: 30px;
}

.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    border: 0px;
    height: 32px;
} 

.ui-state-focus, .ui-menu .ui-menu-item a:hover,
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    background: rgb(223, 223, 223);
    background-image: none !important;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
    zoom: 0%;
    outline: none;
    margin: 0px;
    padding: 0px;
    display: block;
    line-height: 1.0;
    font-weight: normal;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    min-height: 0;
    color: #000;
}

<form action="" method="post" id="search_bar">
  <input type="search" name="search" class="giant-input" autofocus list="hashtags" size="60" />
</form>

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    // padding: 0px; -- Here's the problem
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

我的新代码（有效！）：

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

ul.ui-autocomplete{
    border-top: 0px solid rgb(223, 223, 223) !important;
    border-radius: 0px;
    -moz-border-radius: 0px;
}

ul.ui-autocomplete li:first-child{
    /* border-top: 10px solid rgb(223, 223, 223); */
}

ul.ui-autocomplete li:last-child{
    border-bottom: 10px solid rgb(223, 223, 223);
}

.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    float: left;
    clear: left;
    width: 100%;
    height: 30px;
}

.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    border: 0px;
    height: 32px;
} 

.ui-state-focus, .ui-menu .ui-menu-item a:hover,
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    background: rgb(223, 223, 223);
    background-image: none !important;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
    zoom: 0%;
    outline: none;
    margin: 0px;
    padding: 0px;
    display: block;
    line-height: 1.0;
    font-weight: normal;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    min-height: 0;
    color: #000;
}

<form action="" method="post" id="search_bar">
  <input type="search" name="search" class="giant-input" autofocus list="hashtags" size="60" />
</form>

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

.ui-corner-all{
    background-color: #FFF;
    outline: none;
    margin: 0px;
    // padding: 0px; -- Here's the problem
    border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid rgb(223, 223, 223);
    border-right: 1px solid rgb(223, 223, 223);
}

---

感谢尝试帮助的朋友们！：）

如果没有额外的编码，很难识别问题。编辑：您是否尝试过：第n个孩子（2）。。？也许这不是最后一个孩子，而是第二个。。？你能发布相关的HTML和/或a吗？是的，我今天中午会发布。谢谢你们的回复，很抱歉回复太慢：/问题更新了，现在你们可以帮我了吗？