0

CSSを勉強しようと思っているのですが、ちょっと苦手です。

私のプロジェクトでは、「ui オートコンプリート」を備えた検索バーが 1 つありますが、これは機能しますが、「返品ボックス」のスタイルを編集しようとしていて、問題が発生しています。

現在、オートコンプリートの結果ボックスに境界線が表示されていません。これを解決しようとしています。最後の子の中に 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;
}

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

解決策を見つけました！

私は自分のコードで徹底的に証明し、問題の根本を発見しました。それは単なる（理由はわかりません）パディングです：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 に答える