Q&A
回答いただきありがとうございます。
縦横中央にはなったのですが、aタグのリンクが高さいっぱいに広がらなかったです...。
文字数可変、ナビ数増減ありという条件の中で、
高さを均一にし、高さいっぱいのリンク、文字は縦横中央にしたいのですが、
うまくいきません。
下記のコードでは、高さ均一、高さいっぱいのリンクは実現できるのですが、
文字が縦中央になりません。
ulタグにdisplay:table、liタグにdisplay:table-cellを指定したパターンでも試してみたのですが、liタグ内のaリンクを高さいっぱいにひろげることができず下記のコードを試した次第です。
ご教授いただけますと幸いです。
よろしくお願いいたします。
※追記
htmlは変更できないものとして、CSSのみの変更で実現させたいです。
※追記２
下記のコードでは複数行にならないとのことで、
SAMPLE3の文字を増やしました。
html
1<ul> 2 <li><a href="#">HOME</a></li> 3 <li><a href="#">SAMPLE1</a></li> 4 <li><a href="#">SAMPLE2SAMPLE2SAMPLE2</a></li> 5 <li><a href="#">SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3</a></li> 6</ul>
CSS
1ul { 2 width: 100%; 3 max-width: 1000px; 4 margin: 0 auto; 5 padding: 10px 0; 6 display: flex; 7 flex-flow: row; 8 justify-content: space-around; 9 -webkit-align-items: stretch; 10 align-items: stretch; 11} 12ul li { 13 flex: 1; 14 -webkit-flex: 1; 15 border-right: 2px dotted #ccc; 16} 17ul li a { 18 display: block; 19 width: 100%; 20 height: 100%; 21 padding: 10px; 22 color: #43230d; 23 text-align: center; 24}
回答3件
0
aタグのpadding分だけはみ出る（ずれる）のではないでしょうか。
box-sizing: border-box;を使ってみるのはいかがでしょう？
こういう何がどこにあってどれだけずれているかわかりにくいので、
一時的に背景色などをつけてみるとわかりやすくなると思います。
追記
具体的には・・・
CSSの ul li a {...} にbox-sizing: border-box; を追加してpadding で高さなどを調節するだけです。
ご希望のようにならないでしょうか？
投稿2017/09/14 04:33
編集2017/09/14 12:18
総合スコア219
0
こんな感じでしょうか？
ul{ width: 100%; max-width: 1000px; margin: 0 auto; padding: 10px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -ms-flex-pack: distribute; justify-content: space-around; } ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: stretch; align-content: stretch; border-right: 2px dotted #ccc; width:25%; height:auto; list-style:none; margin:0; padding:0; } ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: stretch; align-content: stretch; width: 100%; height: auto; color: #43230d; margin:0; padding:20px 0; text-align:center; word-break: normal; }
投稿2017/09/14 18:19
総合スコア607
0
ベストアンサー
liとaの高さを取得し、その差分をaのpaddingに与えて高さを揃え、文字が真ん中にくるようにしました。
css
1ul li { 2 flex: 1; 3 -webkit-flex: 1; 4 border-right: 2px dotted #ccc; 5 list-style:none; 6} 7ul li a { 8 -webkit-box-sizing: border-box; 9 -moz-box-sizing: border-box; 10 box-sizing: border-box; 11 display: block; 12 padding: 0 10px; 13 color: #43230d; 14 text-align: center; 15 word-break: break-all; 16}
JavaScript
1$(function(){ 2 var $box = $('ul li'), // 適宜クラスを当てて下さい 3 $Link = $box.children('a'), 4 boxHeight = $box.height(); 5 for (var i = 0; i < $Link.length; i++) { 6 var linkHeight = $Link.eq(i).height(), 7 // 差分をとります（上下半分ずつpaddingとするので÷2しています） 8 diff = (boxHeight - linkHeight) / 2; 9 $Link.eq(i).css({ 10 // 差分と、追加の余白で10px足しています 11 paddingTop : diff + 10, 12 paddingBottom : diff + 10 13 }); 14 } 15});
投稿2017/09/14 06:47
編集2017/09/15 00:42
総合スコア97
記載忘れで申し訳ございません。
htmlを変更しないで、実現する方法はあるのでしょうか。
よろしくお願いいたします。
jQueryは導入されますか？
jQueryを使用することを想定して回答を編集いたします。
jqueryは使用できます。
試してみたところ、うまくいきませんでした。
文字数の多い箇所は横幅が長くなってしまい、横幅均一になりませんでした。
jQueryは使えるんですね！
再度書き直しますので、そちらで試してみて下さい
こちらを試したところ、意図する動きをすべて実装できました！
今回はこちらをベストアンサーとさせていただき、
CSSだけでも実装できないか試してみたいと思います。
ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/14 13:42
2017/09/14 13:57 編集
2017/09/15 04:13