これからの季節に親子でハイキング! >>

メニューなどを例えば#accessにして横並びに項目お置きます。

liで並べて、項目の間に仕切り線が入るようにborderを指定します。

上下にはいらないので、左右に指定します。

すると、1個目のliの右の線と2個目のliの左の線が並ぶので

1px指定しても1個目の左と最後の右だけで、残りは2pxになります。

当然ですが。。

全部1pxにしたい場合どうすればいいですか?

A 回答 (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>
    • good
    • 0

>上下にはいらないので、左右に指定します。


 左右じゃなく一方だけ指定すればよいです。
<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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング