無法水平對齊左，中/右DIV

Question

我有這個HTML：

<html>
<head>
    <title>TEST</title>
    <link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<div class="container">
    <div class="left">
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
    </div>
    <div class="center">
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
    </div>
    <div class="right">
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
    </div>
</div>
</body>
</html>

而這個CSS：

.grezzo{
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
width: 200px;
padding: 30px 30px 30px 30px;
background: grey;
text-align:center;
color: white;
box-shadow: 15px 15px 10px black;
transition: border-radius 2s, background 2s;
-moz-transition: -moz-border-radius 2s, background 2s;
-webkit-transition: -webkit-border-radius 2s, background 2s;
}
.grezzo:hover {
-webkit-border-radius: 40px 30px 40px 30px;
-moz-border-radius: 40px 30px 40px 30px;
border-radius: 40px 30px 40px 30px;
transition: border-radius 2s, background 2s;
-moz-transition: -moz-border-radius 2s, background 2s;
-webkit-transition: -webkit-border-radius 2s, background 2s;
background: darkblue;
}

.nolinea {
text-decoration: none;
}
.left{
float: left;
width: 500px;
}
.center{
margin:0 auto;
width: 100%;
}

.right{
float: right;
width: 500px;

}
.container{
width: 100%;
}

就像jsfiddle一樣。

我的問題是：我想讓我的3個菜單左/中/右，像一張桌子，但不使用它。 我該如何放置它們？

Answer 1

您可以使用CSS顯示類型的表，也可以浮動所有三個菜單（。左，.center，.right） 離開了 ，他們設定合適的寬度。 您正在混合像素寬度和百分比寬度，這可能會引起問題，但是如果執行以下操作：

.left, .center, .right {
    float: left;
    width: 33%;
}

您至少會看到想要的東西的開始。 因為.grezzo的寬度為200px，所以如果在jsfiddle中進行重疊，則會有些重疊。 不知道您的總體頁面布局，很難建議這實際上是否對您來說是一個好的解決方案。

Answer 2

給每個div相同的類，例如.block然后對於CSS，添加.block { display: inline-block; } .block { display: inline-block; }

http://jsfiddle.net/4LRuA/1/

無法水平對齊左，中/右DIV

問題描述

2 個解決方案

解決方案1
1 已采納 2013-01-20 18:57:00

解決方案2
0 2013-01-20 18:50:42

無法水平對齊左，中/右DIV

問題描述

2 個解決方案

解決方案1 1 已采納 2013-01-20 18:57:00

解決方案2 0 2013-01-20 18:50:42

解決方案1
1 已采納 2013-01-20 18:57:00

解決方案2
0 2013-01-20 18:50:42