3

私のページにこのCSSがあります

li
{
    border-right:8px solid #101212;
    border-bottom:8px solid #33B5E5;
}

その後、デフォルトで境界線はこのように表示されます。

ここに画像の説明を入力

しかし、私の場合、私はこのようなものが欲しいです（一番下の行は黒いもので覆われています）

ここに画像の説明を入力

HTMLを変更せずにこれを達成するにはどうすればよいですか(自動的に生成されるため)。

編集：

また、私の ul タグは複数行であるため、すべてが 1 行に収まらず、ul タグに border-bottom を指定しても回避策がないことに注意してください。

私はこれをCSSに持っています。

ul
{
   width:270px;
}

li
{
   float: left;
   width:90px;
}

そして私のhtmlで

<ul>
            <li><a href="listview/index.html"><div class="menu_item_img">&#xe0dc;</div>Editing </a></li>
            <li><a href="listview/detailbuttons.html"><div class="menu_item_img">&#xe0db;</div>Editing </a></li>
            <li><a href="listview/databinding.html"><div class="menu_item_img">&#xe0da;</div>Editing</a></li>
            <li><a href="listview/pull-to-refresh.html"><div class="menu_item_img">&#xe0de;</div>Editing</a></li>
            <li><a href="listview/endless-scrolling.html"><div class="menu_item_img">&#xe0df;</div>Editing</a></li>
            <li><a href="listview/pull-with-endless.html"><div class="menu_item_img">&#xe0cc;</div>Editing</a></li>
            <li><a href="listview/press-to-load-more.html"><div class="menu_item_img">&#xe0cd;</div>Editing</a></li>
            <li><a href="listview/fixedheaders.html"><div class="menu_item_img">&#xe0ca;</div>Editing</a></li>
            <li><a href="listview/templates.html"><div class="menu_item_img">&#xe0c9;</div>Editing</a></li>
</ul>
4

2 に答える 2

4

私はそれを試しました。この問題を解決しました。これを試してみてください。

出力を見る

ul{
    border-bottom:solid 5px #33B5E5;
    height:50px;
    margin:0;
    padding:0;
}
ul li{
    float:left;
    list-style-type:none;
    border-right:solid 5px #101212;
    height:100px;
    padding:0 10px;
   line-height:50px;
    z-index:-1;
    position:relative;
}
于 2013-06-19T13:00:20.580 に答える