ここから本文です

ul li border内部の横幅均一

ste********さん

2012/6/2618:45:11

ul li border内部の横幅均一

※…html
<ul class="menu">
<li>高3!</li>
<li>整頓!</li>
<li>ドラマー!</li>
<li>修学旅行!</li>
<li>残暑見舞い!</li>
</ul>

※…css
li {
float: left;
style-list-type: none;
border: 1px solid;
padding: 5px 5px 5px 5px;
}

1行5列の「枠」にそれぞれ単語を入力したのですが、それぞれの枠組みの横幅を均一にしたいときにどのようにコードを修正・追加すればいいのでしょうか。お願いいたしますヾ(・∀・;)オイオイ

補足追加として…widthを400とか600にして、その枠の下にwidthの数値が同じ画像を挿入して、「枠」「画像」(clear: bothで下にずらす)をモニター中心部にもっていきたい(text-align: centerだったか…)。そうすると「枠」が2行になる可能性があるので、どのようにして横1列に「枠」が納まるのかを教えてください(汗)。この場合「menu」と「li」のどちらに何を入れれば良いのか…。

閲覧数:
231
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

ycc********さん

編集あり2012/6/2700:00:01

CSSにwidth:100px;のようにwidthの設定をして下さい。サイズはご自由に

補足
リスト「全体」が400pxでそれを中央に寄せたいならulにwidth:400px;margin:0 auto;で中央に寄るはずです。
リスト自体を中央寄せにするためにtext-alignを使っては「ダメ」です。
widthとmarginを使った方法で中央によらなければ質問に載っていない部分のHTMLに問題があります。

>どのようにして横1列に「枠」が納まるのかを教えてください(汗)
ulに最低限の幅(width)を設定して、liの幅、margin、padding、borderの合計をulの幅以下になるように計算して数値を設定して下さい。
そうするとブラウザの幅が狭まってもulのwidth以下になりません。

>「枠」「画像」(clear: bothで下にずらす)
これに関してはちょっとよくわかりませんが、上にかいた方法でリストの幅を固定すれば、liの中で2行にでも3行にでもすればいいですよ。自分で何も設定していなかったらclearは必要ありません。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>リスト</title>
<style>
.menu{
width:400px;/* (98+1+1)x4*/
overflow:auto;
margin:0 auto;
padding-left:0;
}
li {
width:98px;
float: left;
list-style-type: none;
border: 1px solid;
}
.menu-item-name,
.menu-item-image{
display:block;
width:100%;
height:auto;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<span class="menu-item-name">Yahoo</span>
<img class="menu-item-image" src="http://i.yimg.jp/images/ks/knowledge_logo.gif" alt="#">
</li>
<li>
<span class="menu-item-name">Yahoo</span>
<img class="menu-item-image" src="http://i.yimg.jp/images/ks/knowledge_logo.gif" alt="#">
</li>
<li>
<span class="menu-item-name">Yahoo</span>
<img class="menu-item-image" src="http://i.yimg.jp/images/ks/knowledge_logo.gif" alt="#">
</li>
<li>
<span class="menu-item-name">Yahoo</span>
<img class="menu-item-image" src="http://i.yimg.jp/images/ks/knowledge_logo.gif" alt="#">
</li>
</ul>
</body>
</html>

質問した人からのコメント

2012/7/2 22:27:01

成功 やはり知恵袋で相談してみるものですね。またいろいろとリアルで進展していますので何かリクエストで御質問するかもしれませんが、よろしくお願いいたします。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる