gpt4 book ai didi

css - 标题菜单 100% 宽度和内联 div,菜单链接右对齐,标题左对齐,除了必须透明的 "active"链接外均为白色

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

这就是我想要的: http://img441.imageshack.us/img441/9764/menuhn.gif

灰色区域是具有 background-size: cover; 属性的背景图像,显示在 HOME 按钮中。其余的都是白色的。

为了使其具有响应性,以便它可以在移动设备中浏览,我希望链接按钮在窗口变窄时彼此放在后面。顺便说一句,右侧链接按钮的顺序是颠倒的。

这是我目前得到的:

http://jsfiddle.net/Emaster/Wmwu4/

HTML

<body>
<div id="header_left_margin"></div>

<div id="header_title">
<h3><a href="index.html">title</a></h3>
</div>

<div id="header_right_margin"></div>
<div id="menu">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
</body>

CSS

body{
background-image: url(http://solfar.pt/wp-content/uploads/2012/01/background-1024x682.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}

#header_title{
border:1px solid blue;
height: 50px;
background-color: white;
}

#header_title,
#header_title h3,
#header_title h3 a{
display: inline;
}

#menu ul li{
float:right;
width: 50px;
height: 50px;
border:1px solid red;
background-color: white;
}

#menu ul li.active {
background-color: transparent;
}

#menu ul{
display: inline;
}

#menu,
#menu ul,
#menu ul li{
display: inline;
}

#header_right_margin{
display: inline;
float:right;
width: 10%;
height: 50px;
border:1px solid green;
background-color: white;
}

#header_left_margin{
display: inline;
float:left;
width: 10%;
height: 50px;
border:1px solid green;
background-color: white;
}

最佳答案

我已经为您制作了这份菜单(下次您需要付费:)。我应该提一下,您不需要将 display: inlinefloat 一起使用,因为 float 无论如何都会占主导地位。这是 updated jsfiddle .另一个想法 - 使用插件进行响应式设计。他们已经有了内置的解决方案。你可以试试bootstrap

关于css - 标题菜单 100% 宽度和内联 div,菜单链接右对齐,标题左对齐,除了必须透明的 "active"链接外均为白色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16705320/

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