0

6 つのリスト項目 (間隔を空けて) をサイト全体で水平方向に均等に配置する方法がわかりません。ページの幅は 1000px です。これは私が持っているものです...

<ul id='mp_locations'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
#mp_locations {
clear:both;
list-style:none;
padding:0;
margin:0;
width: 1000px;
}
#mp_locations li {
float:left;
width:180px;
list-style:none;
height:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
padding:0;
margin:0;
margin-left:10px;
width:15%;
}
#mp_locations li:first-child {
margin-left:0;
}
</style>

これの問題は、15% では小さすぎますが、16% では大きすぎることです。（私の知る限りでは）小数を計算できないため、一定の金額に設定することはできません。基本的に、6 つのボックスをページ全体に均等に並べるにはどうすればよいでしょうか?

4

4 に答える 4

2

ねえwith 、あなたのIDを定義してください #mp_locations li 15.83%

#mp_locations li {
width:15.83%;
}

ライブデモ http://tinkerbin.com/kzx7nX9s

于 2012-07-10T04:02:32.940 に答える
1

あなたは小数を行うことができます:) http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizo ​​ntal_css_menu.html

于 2012-07-10T04:02:07.030 に答える
0

#mp_locations li に変更できる2つの幅ルールがあります

#mp_locations li {
float:left;
width:156px;
list-style:none;
....
margin:0;
margin-left:10px;

また、マージンも変更することをお勧めします。 margin: 0px 5px;

于 2012-07-10T04:10:20.670 に答える
0

必ずしも同じスタイル属性を繰り返さないでください。margin-left以下を参照して変更するだけで、目的の出力を取得できます。

CSS

#mp_locations {
clear:left;
list-style-type:none;
padding:0;
margin:0;
width: 1000px;
background-color:red;
overflow:hidden;
}
#mp_locations li {
float:left;
height:100px;
border-radius:5px;
background-color: #F5F5F5;
margin-left:8px;
width:16%;
display:inline;
}
#mp_locations li:first-child {
margin-left:0;
}

html

<ul id='mp_locations'>
<li>d</li>
<li>f</li>
<li>d</li>
<li>ff</li>
<li>fff</li>
<li>ddfdfdfd</li>
</ul>

ワーキングデモ

于 2012-07-10T04:14:48.013 に答える