gpt4 book ai didi

css - 使菜单居中,左对齐元素

转载 作者:行者123 更新时间:2023-11-28 12:39:20 25 4
gpt4 key购买 nike

我需要设计一个菜单,其中菜单始终居中,元素数量可变,浏览器分辨率,元素将向左对齐(菜单在页面居中,但元素向左对齐) .

(如您所见,它根本没有居中)。

这是我的代码:

<html>
<head>

<style type="text/css">

.extPanel{
background-color:#555;
padding: 0px 20% 0px 20%;
display: table;
}

.split{
clear: both;
}

.menuElement{
float:left;
background-color:#aaa;
margin: 0px 20px 20px 0px;
width: 200px;
height: 200px;
text-align: center;
}

</style>

</head>
<body>

<div class="extPanel">

<div class="menuElement">item1</div>
<div class="menuElement">item2</div>
<div class="menuElement">item3</div>
<div class="menuElement">item4</div>

<div class="split"></div>
External Panel. 20% left and right padding.
</div>

</body>
</html>

如您所见,外部 div 有 20% 的内边距以使元素居中。元素向左浮动。元素根本没有居中,因为存在剩余空间,其中 item4 没有足够的空间,因此它 float 到下一行。

如果菜单只有一个菜单项,则该项会向左浮动,因此更明显的是菜单没有居中。如果我尝试使用某种样式使所有元素居中(文本对齐或类似的东西),item4 将在 item2 下方居中显示,我需要这些元素左对齐。

我需要:

  • 菜单在页面中居中,包含任意数量的元素
  • 元素居中
  • 跨浏览器兼容性(至少对 IE8 和移动浏览器)
  • 没有JavaScript

最佳答案

尝试使用 display: inline-block;

您可以添加以下代码:

.extPanel {
text-align: center;
}
.menuElement {
display: inline-block;
*display: inline; //ie
zoom: 1; //ie
//remove float: left;
}

关于css - 使菜单居中,左对齐元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17776155/

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