0

私はこの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つのメニューを左/中央/右にしたいのですが、使用しないことです。どうすればこのように配置できますか？

4

2 に答える 2

1

テーブルにCSS表示タイプを使用するか、3つのメニューすべて（.left、.center、.right）を左にフロートさせて、適切な幅を設定することができます。ピクセル幅とパーセンテージ幅を混合しているため、問題が発生する可能性がありますが、次の場合は次のようになります。

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

あなたは少なくともあなたが望むものの始まりを見るでしょう。.grezzoの幅は200pxであるため、jsfiddleで実行すると重複が発生します。全体的なページレイアウトを知らなければ、これが実際にあなたにとって良い解決策であるかどうかをアドバイスすることは困難です。

于 2013-01-20T18:57:00.287 に答える
0

各divに同じクラスを与えます。たとえば.block、cssの場合は、次のように追加します。.block { display: inline-block; }

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

于 2013-01-20T18:50:42.840 に答える