gpt4 book ai didi

css - 无法水平对齐 DIV 左/中/右

转载 作者:太空宇宙 更新时间:2023-11-04 15:22:25 25 4
gpt4 key购买 nike

我有这个 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 个菜单像表格一样位于左/中/右,但不使用它。我怎样才能像这样放置它们?

最佳答案

您可以为表格使用 CSS 显示类型,或者您可以将所有三个菜单(.left、.center、.right) float ,并在其上设置合适的宽度。您正在混合像素宽度和百分比宽度,这可能会给您带来问题,但如果您执行以下操作:

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

你至少会看到你想要的东西的开始。因为 .grezzo 是 200px 宽,所以如果你 do it in jsfiddle 会有一些重叠.在不了解您的整体页面布局的情况下,很难判断这是否真的适合您。

关于css - 无法水平对齐 DIV 左/中/右,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14427944/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com