css - 水平中央揃え/均等に分散
の中に
中に

Question

<div>内部にはNavbarがあり<ul>、それぞれにリンク付きの<li>が含まれています<a>(これはナビゲーションバー用です)。

Google とこのサイトを調べましたが、探していたものを正確に見つけることができませんでした。

私が望むのは、現在のスタイルを維持できるようにすることです ( <li>with を内部<a>で使用) <li>。<ul>ナビゲーションバー<div>）。

とにかく、それが意味をなさない場合はお知らせください。現在、それらは左揃えになっています...これが私が持っているものです:

HTML:

<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>

CSS:

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    width: 90%;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}

必要に応じて、.navbar a{} を含めることもできます。私は CSS に非常に慣れていないので、簡単に行ってください。また、最初に SO と Google を調べましたが、このようなものは見つかりませんでした (ただし、私は初めてなので、同じだとは思いません)。

これが欠陥のあるCSSメソッドである場合、および/またはこれを行うためのより簡単で一般的に使用される方法がある場合は、代わりにリンク/投稿してください。

score 23 · Accepted Answer

ulこれにより、 90% の幅を指定したくない場合、幅のない中央のダイナミックが可能になります。

<!doctype html>
<div class="navbar">
    <div id="for-ie">
        <ul>
            <li><a href="Home">Home</a></li>
            <li><a href="Discounts">Discounts</a></li>
            <li><a href="Contact">Contact Us</a></li>
            <li><a href="About">About Us</a></li>
        </ul>
    </div>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

IE6、FX 3 でテスト済み。

編集:無関係な要素のない代替スタイル:

<!doctype html>
<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->

score 9 · Accepted Answer

text-align:fixed を使用すると、数行の CSS だけでこれを行うことができ、余分なマークアップは必要ありません。

ここで私の答えを参照してください: https://stackoverflow.com/a/15232761/87520

<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
</ul>

<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 } 
</style>

score 2 · Accepted Answer

基本的にはtext-align: center、ul とdisplay: inline-blockli に追加されます。

これはトリックを行うようです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
}
</style>
</head>
<body>
<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>
</body>
</html>

score 0 · Accepted Answer

あなたはこのようなものを探しています:?

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.navbar li{
    display:inline;
    line-height:30px;
}
.navbar li a { padding:.4em 5em;}


<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>

score 0 · Accepted Answer

「display: table」と「display: table-cell」を使用できます。コードはよりクリーンで、li の幅はハードコーディングされていません。

<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>

.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    padding: 0px;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navbar li{
    padding: 2px;
    display:table-cell;
    width: 50px; /* just for the browser to get idea that all cells are equal */
    text-align: center;
    border: 1px solid #FF0000;
}

http://jsfiddle.net/dchwv6qn/1/

score 0 · Accepted Answer

コンテナの固定幅を定義する必要があります。

例えば：

.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }

.navbar の背景色を維持したい場合は、100% のままにし、li から float left を削除し、次のようにスタイルを設定します->

.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    width: 800px;
    overflow: hidden;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
    marign: 0 auto;
}

score -2 · Accepted Answer

すべてを試してみましたが、何も機能していないので、同じ問題がある場合は、テーブルと td を使用してそれらを整列させることをお勧めします。それでも正常に動作します。

css - 水平中央揃え/均等に分散の中に中に

8 に答える 8

Related

Reference

css - 水平中央揃え/均等に分散
の中に
中に