gpt4 book ai didi

css - 响应居中的菜单,而菜单按钮也需要调整大小

转载 作者:行者123 更新时间:2023-11-28 08:54:03 26 4
gpt4 key购买 nike

我正在尝试使页面响应。使用两个简单的 div 作为 Logo 效果很好。 Logo 也会调整大小。对于我想创建的菜单,只有这个是一个列表,我发现很难将按钮居中。我已经走到这一步了,但它并没有像我想要的那样居中对齐。仅当它是最小屏幕尺寸时。

@charset"UTF-8";

/* CSS Document */

/*Algemeen*/

#wrapper {
width: 100%;
height: 100%;
margin: 0px auto;
}
header {
padding-bottom: 8%;
width: 100%;
height: auto;
background-color: #88d9ce;
}
#logo {
text-align: center;
padding-top: 10px;
}
#logo img {
min-width: 100px;
max-width: 15%;
height: auto;
}
#menu {
text-align: center;
margin-left: -25px;
width: 100%;
}
ul {
list-style-type: none;
}
li {
float: left;
width: 17%;
height: auto;
margin-right: 3%;
}
li img {
min-width: 60px;
max-width: 50%;
height: auto;
}
<body>
<div id="wrapper">
<header>
<div id="logo">
<img src="http://i61.tinypic.com/13yebnr.jpg" />
</div>
<div id="menu">
<ul>
<li>
<img src="http://i60.tinypic.com/5f0pd4.png" />
</li>
<li>
<img src="http://i59.tinypic.com/2cx6xqs.png" />
</li>
<li>
<img src="http://i58.tinypic.com/veu6o1.png" />
</li>
<li>
<img src="http://i61.tinypic.com/24ebywg.png" />
</li>
<li>
<img src="http://i62.tinypic.com/71r8ut.png" />
</li>
</ul>
</div>
</header>
</div>
</body>

最佳答案

您可以为您的 li 使用 display:inline-block 然后它以 text-align:center 居中。 ul 上的 font-size:0px 是为了去除多余的间距。如果您在该列表项中有文本,请将字体大小放在上面。

演示:https://jsbin.com/xudaz/1/

   <div id="logo">
<img src="http://placehold.it/300x100/000000/FFFFFF&text=LOGO" />
</div>

<ul id="menu">
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=1"/></li>
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=2"/></li>
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=3"/></li>
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=4"/></li>
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=5"/></li>
</ul>

CSS:

#logo {
text-align:center;
padding-top:10px;
}
#logo img {
min-width:100px;
max-width:15%;
height:auto;
}

#menu {
list-style-type:none;
padding:0;
font-size:0px;
white-space:nowrap;
min-width:240px;
text-align:center;
width:100%;
max-width:980px;
margin:0 auto;
}
#menu li {
display:inline-block;
box-sizing:border-box;
border:1px solid red;
width:17%;
}
#menu li img {
height:auto;
width:100%;
max-width:60px;
}

关于css - 响应居中的菜单,而菜单按钮也需要调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27207582/

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