ベストアンサー

【CSS】borderの変則指定？li要素

2014/01/28 10:38

メニューなどを例えば#accessにして横並びに項目お置きます。 liで並べて、項目の間に仕切り線が入るようにborderを指定します。上下にはいらないので、左右に指定します。すると、１個目のliの右の線と２個目のliの左の線が並ぶので 1px指定しても１個目の左と最後の右だけで、残りは2pxになります。当然ですが。。全部1pxにしたい場合どうすればいいですか？

noname#222079

HTML
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2014/01/28 12:51 回答No.1

IEがネックになりますね IEを無視する場合は、こんな感じ <style> ul.access{list-style:none;} ul.access li{float:left;width:100px;text-align:center;border:1px solid #000000; border-left:0px solid;} ul.access li:first-child{border-left:1px solid;} </style> <ul class="access"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> これにIE対策をして <style> ul.access{list-style:none;} ul.access li{float:left;width:100px;text-align:center;border:1px solid #000000; border-left:0px solid; behavior:expression( this.className+=this.previousSibling?"":(this.className?" ":"")+"firstchild" ); } ul.access li:first-child,ul.access li.firstchild{border-left:1px solid;} </style> <ul class="access"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul>

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/01/28 15:57 回答No.2

＞上下にはいらないので、左右に指定します。　左右じゃなく一方だけ指定すればよいです。 <div class="header"> 　<p>？？？？？？</p> 　<div class="nav"> 　　<ol> 　　　<li><a href=""></a></li> 　　　<li><a href=""></a></li> 　　　<li><a href=""></a></li> 　　　<li><a href=""></a></li> 　　</ol> 　</div> </div> ちなみに、[HTML5]だと <header> 　<p>？？？？？？</p> 　<nav> 　　<ol> 　　　<li><a href=""></a></li> 　　　<li><a href=""></a></li> 　　　<li><a href=""></a></li> 　　　<li><a href=""></a></li> 　　</ol> 　</nav> </header> の<li>要素をinline-blockで横並びにした後、最初の<LI>のみ左右につけたら、二つ目以降の<LI>はborder-width:0 1 0 0;で右側だけborderがつく。 [HTML4.01strict]サンプル ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="header"> ＿＿＿<p>？？？？？？</p> ＿＿＿<div class="nav"> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿＿<li><a href="/Products">Products</a></li> ＿＿＿＿＿<li><a href="/Manual">Manual</a></li> ＿＿＿＿＿<li><a href="/contact">Contact</a></li> ＿＿＿＿</ol> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

ログインすると、全ての回答が全文表示されます。