个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我想让我的导航栏看起来像这样http://www.templatemonster.com/demo/51347.html
请在更正代码时说明其背后的原因。这将有很大帮助。谢谢
此外，显示的社交网络图标为黑色，悬停效果使其呈现红色。它是图像还是只能借助 css 来实现？
body {
background:gray;
/*border: 2px solid yellow;*/
}
.headwrap {
width: 93%;
height: auto;
margin: auto;
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
display: inline;
padding-left: 20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left;
}
.navbar ul {
list-style: none;
margin: 0;
float: left;
padding: 30px 15px;
}
.navbar ul li {
display: inline;
padding: 15px;
border-right: 2px solid black;
color: white;
font-weight: bold;
font-family: sans-serif;
}<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"</li>
<li><img src="twitter.png"</li>
<li><img src="feed.png"</li>
<li><img src="google.png"</li>
</ul>
</div>
<nav class="navbar">
<ul>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</nav>
</header>
</body>
</html>最佳答案
容器宽度的 float 和百分比是一个很好的方法，尤其是当您负担不起固定宽度的容器时。不要忘记调整字体大小，以确保文本不会膨胀它的容器大小并保持在一行中。此外，为此，您只需要在“li”元素本身上 float 即可。永远不要忘记清除 float (提供的 clearfix 类)。
附言如果不使用“box-sizing: border-box;”，实现起来会困难得多，这里有一篇好文章 about box-sizing css property
代码:
<header class="headwrap">
<nav class="navbar">
<ul class="clearfix">
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</nav>
</header>
* {
/* Very important part, set on all elements for simplicity. */
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.headwrap {
width: 93%;
height: auto;
margin: auto;
padding-top: 70px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 15px;
}
.navbar ul li {
/* float it to have no issues with whitespace between inline-blocks */
float: left;
padding: 15px;
/* borders from both sides */
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
/* total width 100% / 5 elements */
width: 20%;
}
/* No left border for the first one */
.navbar ul li:first-child {
border-left: none;
}
/* No right border for the last one */
.navbar ul li:last-child {
border-right: none;
}
/* Helps with floats inside */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
这是 fiddle
关于html - 如何在导航栏中创建相等的空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37890932/
24
4
0
我在让我的操作栏显示图标时遇到问题。它显示了我在溢出菜单中设置的文本/标题(三个点)，但没有任何操作。这是我的代码，我错过了什么？ MainActivity.java public class Mai
我正在尝试在 android 中制作一个动态操作栏，现在我正在尝试像这样在操作栏中进行搜索。 http://developer.android.com/images/ui/actionbar-sear
我正在编写 uiautomator 测试，但我很难弄清楚如何单击我的操作栏图标。 如果我的操作是“始终”显示，则很容易找到并点击。 如果我的操作是显示“从不”，我必须单击菜单，然后从菜单中单击。先点击
我有一个正在寻找特定 URI 的重写规则。当它匹配特定的 URL 时，它会使用正确的文件路径重写它，以便可以找到所需的内容。然后它将协议(protocol)更改为 HTTPS 并允许请求通过。 我有两
我正在为 android 中的 ActionBar 而苦苦挣扎。 这是我的问题:我的操作项没有显示在操作栏中，而是堆叠在操作溢出中，无论我做什么.. 我花了一天的时间寻找解决方案，但我似乎找不到缺少的
我的网络应用程序在 Tomcat 下运行，它非常密集地使用 AJAX 请求，在开发过程中我也必须密集地重新部署网络应用程序。重新部署后，我通常会简单地刷新页面，知道用户 session 已删除，但我总
我是一名优秀的程序员,十分优秀！