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ランキング
-
リストの並べ替え
-
ボタンを横に並べて表示させる方法
-
<ul><li></li></ul>にするメリ...
-
なぜ?マウスオーバーで1pt位置...
-
プルダウンメニューの背景色を...
-
html <ul></ul>の並びで一行空...
-
cssの display: flex;で横並び...
-
レスポンシブWebデザインでリン...
-
円形の配置にするコーディング...
-
アコーディオンがうまくいかない。
-
cssのリストで、番号1と2の間の...
-
htmlで画像を表示する方法につ...
-
HTML5のfooterに見出しを付けて...
-
格子状に並んだdivボックスの効...
-
画像の隙間を埋める方法
-
HTMLで組織図を作成する方法
-
CSSでdiv内を下揃え
-
cssで写真と説明文の表示方法?
-
CSS3グラデーションで、右端だ...
-
番号付きリスト(<Ol><Li>・・...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報