Question

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

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

现在我的自动填充结果框没有显示边框底部，我正在尝试解决此问题。当我输入border-bottom：10px在Last-Child中我没有成功，但是当我输入border-top：10px在First-Child中我有！

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>

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

Answer 1

我找到了解决方案！

我在代码中用尽了证据，我发现了问题的根源。它只是（我不知道为什么）填充：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);
}

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

边框顶部工作在第一个孩子，但不是边界底部

1 个答案:

我找到了解决方案！