个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试构建自定义导航栏。目前，它看起来像这样:
如何将我的每个 anchor 元素置于每个框的中心(垂直和水平)？此外，品牌元素的字体更大，但我想要一个能够很好地居中所有元素的解决方案。
简而言之，我希望它看起来像这样:
第一张图片的边框显然是为了测试。我用 photoshop 编辑了第二张照片。我的这个页面的代码是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>My Page</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-top: 13px;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 20px;
font-weight: bold;
margin-top: 7px;
margin-right: 25px;
}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<nav class="navbar">
<div class="container">
<ul class="navbar-list navbar-list-left navbar-brand-list">
<li class="navbar-item navbar-brand-item">
<a href="#" class="navbar-link navbar-brand-link">BRAND</a>
</li>
</ul>
<ul class="navbar-list navbar-list-left">
<li class="navbar-item">
<a href="http://professorsreviewbd.com" class="navbar-link">Product</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Pricing</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Company</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Blog</a>
</li>
</ul>
<ul class="navbar-list navbar-list-right">
<li class="navbar-item">
<a href="#" class="navbar-link">Log in</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Sign up</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="twelve column">
<h4>Basic Page</h4>
<p>
Lorem ipsum ....
</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
注意:我正在使用 Skeleton为此。
那么我该如何修复我的导航栏呢？这些是我想要的东西:
感谢任何帮助!
最佳答案
替换此 css 并检查，它可能对您有帮助..
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 18px;
font-weight: bold;
margin-right: 25px;
}
</style>
关于html - 如何在我的自定义导航栏中将我的 anchor 元素居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37663081/
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 已删除，但我总
我是一名优秀的程序员,十分优秀！