- ベストアンサー
【CSS】borderの変則指定？li要素
メニューなどを例えば#accessにして横並びに項目お置きます。 liで並べて、項目の間に仕切り線が入るようにborderを指定します。 上下にはいらないので、左右に指定します。 すると、１個目のliの右の線と２個目のliの左の線が並ぶので 1px指定しても１個目の左と最後の右だけで、残りは2pxになります。 当然ですが。。 全部1pxにしたい場合どうすればいいですか？
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
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)
＞上下にはいらないので、左右に指定します。 左右じゃなく一方だけ指定すればよいです。 <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"> <!-- div.header div.nav ol,div.header div.nav ol li{ text-align:center;list-style:none;margin:0;padding0; font-size:0; line-height:26px; } div.header div.nav ol li{ display:inline-block; width:20%; font-size:16px; border:black solid; border-width:0 1px 0 1px; position:relative; } div.header div.nav ol li+li{ border-left-width:0; } div.header div.nav ol li a{ display:block; width:90%;height:100%;margin: 0 auto; text-decoration:none; background-color:rgb(240,240,240); overflow:hidden; position:relative; } div.header div.nav ol li a:hover{ background-color:red; text-indent:-20em; } div.header div.nav ol li a:hover:after{ display:block; position:absolute;top:0;left:0; text-indent:0; width:100%; } div.header div.nav ol li a[href="/"]:hover:after{content:"トップ";} div.header div.nav ol li a[href="/Products"]:hover:after{content:"製品";} div.header div.nav ol li a[href="/Manual"]:hover:after{content:"マニュアル";} div.header div.nav ol li a[href="/contact"]:hover:after{content:"問合せ";} --> </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>
