gpt4 book ai didi

html - 在宽度为 1000% 的容器中居中放置几个​​链接?

转载 作者:太空宇宙 更新时间:2023-11-04 04:40:27 24 4
gpt4 key购买 nike

我有一个导航元素列表,我希望最终能够轻扫这些元素,因此我创建了一个无序列表,该列表最初具有 1000% 的宽度用于测试,并且链接位于内联 block 中。如果有足够的链接来填满页面的整个宽度,这会很好用,但如果只有几个链接,它们就会卡在导航的左侧,理想情况下我想做的是让这些链接居中。我尝试将 text-align: center 添加到导航栏,但这会使链接居中于 1000% 宽的空间而不是 100% 的页面宽度。谁能推荐一个解决方案,因为我认为这可能只用 CSS 就可以实现

JS Fiddle(只有几个链接):http://jsfiddle.net/HS4VE/

CSS

nav {
padding: 10px 0;
overflow: hidden;
text-align: center;
border: 1px solid #cccccc;
border-left: 0;
border-right: 0;
}

nav li {
display: inline-block;
vertical-align: middle;
zoom: 1;
margin-right: -4px;
position: relative;
}

nav a {
color: white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #454545), color-stop(100%, #363636));
background-image: -webkit-linear-gradient(#454545, #363636);
background-image: -moz-linear-gradient(#454545, #363636);
background-image: -o-linear-gradient(#454545, #363636);
background-image: linear-gradient(#454545, #363636);
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 0 15px;
width: 186px;
display: block;
border-right: 1px solid white;
text-align: center;
}

nav a.is-active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fe57ae), to(#fe329b));
background-image: -webkit-linear-gradient(#fe57ae, #fe329b);
background-image: -moz-linear-gradient(#fe57ae, #fe329b);
background-image: -o-linear-gradient(#fe57ae, #fe329b);
background-image: linear-gradient(#fe57ae, #fe329b);
}

.inner {
width: 1000%;
}

最佳答案

使用这个:

.inner {
white-space:nowrap;
max-width: 1000%;
}

演示:http://jsfiddle.net/HS4VE/3/

关于html - 在宽度为 1000% 的容器中居中放置几个​​链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15574192/

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