gpt4 book ai didi

css - 三列
导航栏,基于中心
的宽度

转载 作者:可可西里 更新时间:2023-11-01 14:58:22 25 4
gpt4 key购买 nike

我想要完成的是一个居中对齐的导航栏,两侧用左右填充 div 填充。

实际的导航栏目前是一个内联 block div,包含我的链接标签和左右过渡图像,这将导致导航栏的背景占用剩余空间。

通常,我会将导航栏居中放置在 100% 宽度的 div 中,并使用那个宽的 div 作为背景,但由于我使用的是半透明的 .png 文件,所以我不能那样重叠。

我想要的布局:

Image of layout showing the three DIVs

(Click image to view full size.)

我更新了这个问题以包含我正在使用的实际图像。目前我设置了三个 <div> s (从技术上讲,中心是 <UL> )固定宽度,但我想增加添加/删除链接的灵 active ,它会扩展和收缩 <div>因此。正如我之前所说,我无法将中心链接居中对齐并将它们重叠在背景上,因为我使用的是半透明 .png图像文件。

最佳答案

事实是,您不需要填充 <div> .您需要做的就是指定一个 auto水平边距,它会自动扩展以占据所有可用空间(因此将您的内容居中作为副作用)。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#header-nav {
width: 100%;
}

#header-nav-items {
margin: 0 auto; /* auto centers */
}

#header-nav-items a {
display: block;
width: 200px;
text-align: center;
background: #f00;
}
</style>
</head>
<body>
<div id="header-nav">
<div id="header-nav-items">
<a href="#">We are centered!</a>
</div>
</div>
</body>
</html>

关于css - 三列 <DIV> 导航栏,基于中心 <DIV> 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3376725/

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