0

以下のような効果を作成するために複数の単語のフレーズ（「人権」など）を使用する場合を除いて、単語を均等に配置（つまり完全に正当化）して行を埋めるにはどうすればよいですか？

アクティビズム人権など

4

5 に答える 5

2

ナビゲーションメニューにはhtmlリストを使用する必要があります。

ここにチュートリアルがありますが、グーグルで検索すると他にもたくさんあります：http: //jamesowers.co.uk/css-tutorials/50/horizo​​ntal-css-list-menu /

その背後にある理由：

  • cssがロードされない/サポートされていない場合、メニューは見栄えがします
  • アクセシビリティに役立ちます
  • 意味的には、アイテムのリストを表示しているので、それらを表示するためのリストよりも優れているものは何ですか？

編集

最も簡単なhtml/cssのみの解決策はテーブルを使用することですが、レイアウトに使用されるテーブルを見ると目が燃えます。（提供したいブラウザーのサポートに応じて、ul liネストされたdivタグやcssdisplay:table-cell/table-rowなどを使用しない場合があります）

ここでフィドル：http：//jsfiddle.net/nTM3S/

    <table cellpadding="3" class="myTable" style="text-align:center">
        <tr>
           <td>Politics</td>
           <td>Environment</td>
           <td>Economics</td>
           <td>Culture</td>
           <td>Human Rights</td>
           <td>Politics</td>
           <td>Environment</td>
           <td>Economics</td>
           <td>Culture</td>
           <td>Human Rights</td>

        </tr>
    </table>

およびcss：

td {
    width: 1%;
    padding: 20px;
    white-space: nowrap;
    background-color: #ccc;
    color: #900;
}
于 2012-06-15T10:56:30.737 に答える
2

アイテムをに入れて、<ul>それぞれにマージンを追加します<li>

デモを参照してください：http：//jsfiddle.net/L8qnh/3/

HTML

<ul>
    <li>Politics</li>
    <li>Enviroment</li>
    <li>Economics</li>
    <li>Human Rights</li>
    <li>Country</li>
</ul>

Css

ul{
    list-type:none;
}

li{
    float: left;
    margin-right: 40px;
}
于 2012-06-15T11:00:11.227 に答える
0

text-align: justify;等間隔にしたいテキスト行に適用し、複数の単語のフレーズ（「人権」など）を次のように記述します（パディングを適切に調整します）。

<span style="padding-right:3px;">Human</span>rights
于 2012-06-15T10:52:55.187 に答える
0

これを使用するブラウザによっては、質問への回答は、&nbsp;まとめたいフレーズを入力するのと同じくらい簡単な場合があります。

Politics Enviroment Economics Human&nbsp;Rights Country

そして、すべてを正当化します。jsFiddleを参照してください。

残念ながら、これはすべてのブラウザで機能するわけではありません。IE8とOperaでは問題ありませんが、FirefoxとChromeは他のスペースと同じようにnbspを拡張します。

于 2012-06-15T12:15:25.960 に答える
0

各要素にdivを使用し、それらの表示プロパティをインラインに設定します...例は次のとおりです。

<html>
<head>
    <style type="text/css">
        .food{
            padding:5px;
            display:inline;
        }
    </style>
</head>
<body>
    <div class="food">Hamburger</div>
    <div class="food">Pizza</div>
    <div class="food">Hot Dog </div>
    <div class="food">Chicken</div>

</body>
</html>
于 2012-06-15T12:16:27.840 に答える