Navbar <div>
を持ち、内部は<ul>
で、各<li>
にはリンク付きの<a>
が含まれます(これはナビゲーションバー用です)
私はグーグルとこのサイトを見ましたが、探しているものを正確に見つけることができませんでした。
私が望んでいるのは、現在のスタイルを維持し(<li>
を内部に<a>
を使用して)、<li>
を均等に分散して中央に配置することです(この部分は、均等に分散...)<ul>
(navbar <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メソッドである場合、および/またはこれを行うためのはるかに簡単で、より一般的に使用される方法がある場合。代わりにそれをリンク/投稿しますが、私にとって最も理にかなっているので、この方法を好むでしょう。
ありがとう
これにより、90%の幅を指定したくない場合に、幅のない中央動的ul
が許可されます。
<!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]-->
Text-align:fixedを使用すると、CSSを数行追加するだけで、追加のマークアップは不要です。
ここで私の答えを参照してください: https://stackoverflow.com/a/15232761/8752
<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>
最近これを行う適切な方法は、Flexboxを使用することです。
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap; /* assumes you only want one row */
}
基本的に、text-align: center
をulに、display: inline-block
をliに追加します。
これはトリックを行うようです:
<!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>
次のようなものを探していますか?
.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>
「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;
}
あなたはあなたのコンテナに固定を定義する必要があります。
例えば:
.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }
.navbarのbg色を維持したい場合は、100%に固執し、liから残っているフロートを削除し、このようにスタイルします->
.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;
}