html5とcss3にてスマートフォンサイト制作をしております。
リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと
思っていますが、うまくいきません。
詳しい方、ご教授いただけませんでしょうか。 よろしくお願い致します。
----------------------------------------------------------
[HTML]
<nav>
<ul id="navi">
<a href="#"><li>メニュー1</li></a>
<a href="#"><li>メニュー2</li></a>
<a href="#"><li>メニュー3</li></a>
<a href="#"><li>メニュー4</li></a>
<a href="#"><li>メニュー5</li></a>
</ul>
</nav>
[CSS]
nav {
display: block;
width: 300px;
margin-right: auto;
margin-left: auto;
margin-bottom: 18px;
}
#navi {
border-radius: 8px;
-webkit-border-radius: 8px;
border: 1px solid #CCCCCC;
background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7));
background-color: #FFFFFF;
}
#navi a {
text-decoration: none;
color: #646464;
font-size: 1.31em;
text-indent: 16px;
height: 33px;
line-height: 33px;
}
#navi li {
border-bottom: 1px solid #CCCCCC;
}
#navi li:last-child {
border-bottom-style: none;
}
No.2ベストアンサー
- 回答日時:
まず、HTMLをチェックしましょう。
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
確かに、HTML5ではA要素で<li></li>を括ることはできますが、この場合は
<li><a></a></li>
とすべきです。以下、タブは全角スペース2個に置換してあります。
<nav id=#grovalNavi">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
とすべきです。
nav {display: block;width: 300px;margin: 0 auto 18px;}
nav ul,nav ul li{display:block;list-style-type:none;margin:0;padding:0;position:relative;}
nav ul{
border-radius: 8px;
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
background: -moz-linear-gradient(white, #E7E7E7);
background: -webkit-gradient(linear, left top, left bottom, from(white), to(#E7E7E7));
line-height: 26px;
text-align:center;
}
nav ul li{height:33px;}
nav ul li a{
text-decoration: none;
color: #646464; font-size: 18px;
display:block;height:95%;width:80%;margin:auto;
}
nav ul li {border-bottom: 1px solid #CCCCCC;}
nav ul li:last-child {border-bottom-style: none;}
しかし、最後の二行は、次のほうが良いです。borderの引かれる順番があるので・
nav ul li+ li{border-top:1px solid #CCCCCC;}
★上記スタイルシートは、aをblockにしてありますが、上下のリンクエリアとの間にリンク不能のスペースを取りましょう。
ORUKA1951様
とても丁寧にご回答いただきありがとうございました。
いただいた回答を参考に実装することが出来ました。
ありがとうございました。
No.1
- 回答日時:
<ul id="navi">
<li><a href="#a">メニュー1</a></li>
<li><a href="#b">メニュー2</a></li>
<li><a href="#c">メニュー3</a></li>
<li><a href="#d">メニュー4</a></li>
<li><a href="#e">メニュー5</a></li>
</ul>
cssはそのままでliとaをひっくり返して見てください(親子関係を変える)。
ulの子どもはliのみ認められています。
DrFell様
ご回答ありがとうございました。
やはりli と a の逆転は使用できないのですね。
都合上どうしても逆転させたかったのですが。
参考になりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストを2つに分割して、それぞ...
-
リセットCSSについて
-
円形の配置にするコーディング...
-
3番目のBoxだけずれる
-
<li>で並べたメニューのリンク...
-
透明のボックスにリンクを貼りたい
-
レスポンシブWebデザインでリン...
-
divタグ内のコンテンツが重なっ...
-
【至急】ul li 行間調整ができ...
-
jQueryの導入方法について
-
ulタグやliタグの中でbrタグ...
-
画像にリンクを張ると画像がず...
-
表の文字サイズ変更ボタンにつ...
-
<ul>~</ul>が二つ続くと間に改...
-
html <li>の中の文字一部に色を...
-
html <ul></ul>の並びで一行空...
-
ホームページの質問です。
-
CSS質問:大手サイトを見ると何...
-
<ul><li></li></ul>にするメリ...
-
liタグの中に<p>タグやら<dl>を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
HTMLで組織図を作成する方法
-
レスポンシブWebデザインでリン...
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
divタグ内のコンテンツが重なっ...
-
リストを2つに分割して、それぞ...
-
ページを開いているときのリン...
おすすめ情報