0

我试图学习一些 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>

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

4

1 回答 1

0

我找到了解决方案！

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

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

于 2013-09-10T00:18:06.657 回答