No.2
- 回答日時:
liは本来ブロック要素なので、そのままでは横並びできないはずです。
文字数で伸縮すると言うことは、displayプロパティでinlineに指定しているのかな?displayの値をblockにしてfloatさせるなら、必ず幅を指定しているはずですし、displayの値をinline-blockにしているなら幅を指定してください。
最近は、ウィンドウ/ディスプレイの幅がスマホから幅広ディスプレイと様々なので、リキッドデザインにすることが多いと思いますが、その場合は、ユーザー(特に視覚弱者)がフォントサイズを(大きく)変更する可能性があるので、余裕を見てサイズを指定するのが良いでしょう。min-widthで最小幅を指定して、ウィンドウ幅が小さい場合は2行になるようにしても良いでしょう。
[例]HTML4.01
<div class="nav">
<ol>
<li><a href="/">Top</a></li>
<li><a href="/product">製品</a></li>
<li><a href="/recruit">募集</a></li>
<li><a href="/profile">会社案内</a></li>
<ol>
</div>
[例]HTML5
<nav>
<ol>
<li><a href="/">Top</a></li>
<li><a href="/product">製品</a></li>
<li><a href="/recruit">募集</a></li>
<li><a href="/profile">会社案内</a></li>
<ol>
</nav>
[CSS] HTML4.01用 ★リキッドでスマホにも対応★
div.nav{width:80%;margin:0 auto;max-width:800px;}
div.nav ol{line-height:40px;text-align:center;list-style:none;position:relative;}
div.nav ol,div.nav ol li{margin:0;padding:0;}
div.nav ol li{display:inline-block;width:20%;min-width:5em;}
div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;border:solid 1px red;}
div.nav ol li a:hover{background-color:yellow;}
[CSS]HTML5用
nav{width:80%;margin:0 auto;max-width:800px;}
nav ol{line-height:40px;text-align:center;list-style:none;position:relative;}
nav ol,div.nav ol li{margin:0;padding:0;}
nav ol li{display:inline-block;width:20%;min-width:5em;}
nav ol li a{display:block;width:100%;height:100%;text-decoration:none;border:solid 1px red;}
nav ol li a:hover{background-color:yellow;}
★line-heightは高さの中心を合わせるため指定しています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) プログラミング python pandas 固定長データの出力 2 2022/08/16 11:22
- Excel(エクセル) エクセルにおいてセル内の文字を出来るだけ大きく表示する方法を教えてください。 4 2022/07/30 08:08
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/02/08 09:05
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/02/10 11:41
- その他(インターネット接続・インフラ) Webサイトのフォント・級数変更について 1 2022/10/18 18:08
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- Excel(エクセル) エクセル2013「次のページ数に合わせて印刷」が小さすぎる 9 2023/03/28 10:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
divタグ内のコンテンツが重なっ...
-
<li>で改行する横並びのメニュー
-
ulとliで囲った文字の一部を変...
-
cssのみでメガメニューの作成に...
-
HTML5のfooterに見出しを付けて...
-
画像を縦に4つ並べたい場合
-
ulタグやliタグの中でbrタグ...
-
疑似クラス :activeが効きません
-
【至急】ul li 行間調整ができ...
-
li 長さ指定
-
<table>の高さ固定。情報増加時...
-
【CSS】メニュー上部に固定させ...
-
IEで<td>の全角を有効にする方法
-
ボタンを横に並べて表示させる方法
-
3番目のBoxだけずれる
-
html <ul></ul>の並びで一行空...
-
(HP作成)メニューバーのプル...
-
HTMLで組織図を作成する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報