css - ボーダーボトムがサイドボーダーに「漏れる」のを防ぎますか?

Question

子に 1ulピクセルの左境界線と 2 ピクセルの下境界線がありliます。li問題は、各要素の下の境界線の間に 1px のスペースを確保したいことです。現在の外観は次のとおりです。

どのように見せたいですか：

ご覧のとおり、がborder-left終了するとがborder-bottom続き、1px のギャップを埋めます。これを防ぐ方法はありますか？

関連する HTML は次のとおりです。

        <div id="mainNav">
          <ul>
            <li>
                <a href="#" class="mainNavLink">Leaderboards</a>
            </li>
            <li>
                <a href="#" class="mainNavLink">Statistics</a>
            </li>
            <li id="mainNavSearch">Search</li>
        </ul>
      </div>

そしてCSS：

#mainNav{
    width: 100%;
    height: 35px;
    background-color: #202020;
    border-bottom: 1px solid #444;
    position: relative;
    overflow: hidden;
}

#mainNav ul{
    width: 960px;
    height: 35px;
    margin: 0 auto 0 auto;
    display: block;
    position: relative;
}

#mainNav ul li{
    float: left;
    position: relative;
    height: 25px;
    padding: 10px;
    padding-top: 8px;
    padding-bottom: 0;
    font-size: 17px;
    border-left: 1px solid #444;
    border-bottom: 2px solid #00a4ff;
    background: -moz-linear-gradient(top,  rgba(24,24,24,0) 60%, rgba(24,24,24,0.38) 90%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(24,24,24,0)), color-stop(90%,rgba(24,24,24,0.38)), color-stop(100%,rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181818', endColorstr='#80000000',GradientType=0 );
}

#mainNavSearch{
    border-right: 1px solid #444;
}

score 0 · Accepted Answer

内部a要素のスタイルを設定する

ライブデモはここで見ることができます: http://jsbin.com/welcome/36341

* { margin: 0; padding: 0; }

#mainNav{
    width: 100%;
    height: 35px;
    background-color: #202020;
    border-bottom: 1px solid #444;
    overflow: hidden;
}

#mainNav ul{
   height: 35px;
  list-style: none;
}

#mainNav ul li{
    float: left;
    height: 35px;
    padding-bottom: 0;
    font-size: 17px;
    border-right:1px solid #444;
    background: -moz-linear-gradient(top,  rgba(24,24,24,0) 60%, rgba(24,24,24,0.38) 90%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(24,24,24,0)), color-stop(90%,rgba(24,24,24,0.38)), color-stop(100%,rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181818', endColorstr='#80000000',GradientType=0 );
}

#mainNav a {
  height: 33px;
  display: block;
  line-height: 33px;
  border-bottom: 2px solid #00a4ff;
  color: #fff;
  padding-left: 10px; padding-right: 10px;
  text-decoration: none;
  font-weight: bold;
  font-family: sans-serif;
}

score 0 · Accepted Answer

a要素全体のサイズにしたくないという事実に加えて、境界線が漏れるのを防ぐ方法を見つけることができなかったのでli、追加を挿入し、代わりにスタイルをそれにdiv適用する必要がborder-bottomありました。padding-left/right

HTML:

    <div id="mainNav">
        <ul>
            <li>
                <div>
                    <a href="#" class="mainNavLink">Leaderboards</a>
                </div>
            </li>
            <li>
                <div>
                    <a href="#" class="mainNavLink">Statistics</a>
                </div>
            </li>
            <li id="mainNavSearch">Search</li> <!-- I did not include a div here as I plan on changing this to a search bar later -->
        </ul>
    </div>

CSS:

#mainNav{
    width: 100%;
    height: 35px;
    background-color: #202020;
    border-bottom: 1px solid #444;
    position: relative;
    overflow: hidden;
}

#mainNav ul{
    width: 960px;
    height: 35px;
    margin: 0 auto 0 auto;
    display: block;
    position: relative;
}

#mainNav ul li{
    float: left;
    position: relative;
    height: 27px;
    font-size: 17px;
    border-left: 1px solid #444;
    padding-top: 8px;
}
#mainNav div{
    display: block;
    position: relative;
    height: 25px;
    padding: 0 10px 0 10px;
    border-bottom: 2px solid #00a4ff;
    background: -moz-linear-gradient(top,  rgba(24,24,24,0) 60%, rgba(24,24,24,0.38) 90%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(24,24,24,0)), color-stop(90%,rgba(24,24,24,0.38)), color-stop(100%,rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181818', endColorstr='#80000000',GradientType=0 );
}
#mainNavSearch{
    border-right: 1px solid #444;
    padding: 0 10px 0 10px;
}

出力：

div追加せずにスタイルをタグに適用せずにこれを行う方法を誰かが知っている場合はa、共有してください。

css - ボーダーボトムがサイドボーダーに「漏れる」のを防ぎますか?

2 に答える 2

Related

Reference