Border-top 适用于第一个孩子，但不适用于border-bottom答案

【问题标题】：Border-top works inside first-child, but not border-bottomBorder-top 适用于第一个孩子，但不适用于border-bottom
【发布时间】：2013-09-25 11:59:48
【问题描述】：

我尝试学习一些 CSS，但遇到了一些麻烦。

在我的项目中，我有一个带有“ui 自动完成”的搜索栏，这是可行的，但我正在尝试编辑“返回框”的样式并且遇到了一些麻烦。

现在我的自动完成结果框不显示底部边框，我正在尝试解决这个问题。当我在 Last-Child 中输入border-bottom: 10px 时，我没有成功，但是当我在First-Child 中输入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;
}

HTML：

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

我做错了吗？我该怎么做才能解决这个问题？

【问题讨论】：

如果没有额外的编码，很难识别问题。编辑：您是否尝试过：nth-child(2)..？也许这不是最后一个孩子，而是第二个..？只是一个建议
你能发布相关的 HTML 和/或jsFiddle吗？
是的，我会在今天中午发帖。感谢您的回复，抱歉回复缓慢：/
问题更新了，大家可以帮帮我吗？

标签： css jquery-ui autocomplete

【解决方案1】：

我找到了解决办法！

我在我的代码中用尽全力进行了证明，我发现了问题的根源。这只是（我不知道为什么）一个 padding: 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);
}

我的新代码（工作！）：

.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);
}

感谢尝试帮助的朋友！ :)

【讨论】：