个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我目前正在处理一个类(class)元素，我们需要从 psd 文件创建一个网站。到目前为止，我在导航栏上，但我遇到了问题，因为导航栏中的最后 2 个链接位于前 2 个元素的下方，而不是显示在一行中。从 Logo 到最后一个链接的整个顶部都包裹在一个宽度为 940 像素的容器中。链接中的字母必须为 20px。这就是网站的外观 Pic from the finished site
到目前为止，这就是它寻找我的方式 Test pic
这是我的 HTML
<html>
<head>
<meta charset="utf-8">
<title>NeoDance Studio</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<header class="Top">
<div class="wrapperHeader">
<img src="img/logo.png" alt="NeoDance Logo" width="356" height="48" class="logo">
<nav class="NavBar">
<ul class="links">
<li class="links"><a href="" class="links">Home</a></li>
<li class="links"><a href="" class="links">About</a></li>
<li class="links"><a href="" class="links">Class schedules</a></li>
<li class="links"><a href="" class="links">Performances</a></li>
<li class="links"><a href="" class="links">Blog</a></li>
<li class="links"><a href="" class="links">Contact</a></li>
</ul>
</nav>
<div class="ClearFix"></div>
</div>
</header>
和我的CSS
header.Top{
margin: auto;
background-color: #303030;
overflow: hidden;
}
div.wrapperHeader{
width: 940px;
}
}
div.wrapper{
width: 940px;
margin: auto;
background-color: #f6f6f6;
overflow: hidden;
}
img.logo{
margin: auto;
margin-top: 35px;
margin-bottom: 35px;
margin-left: 10px;
background-color: #303030;
}
nav.NavBar{
float: right;
width: 480px;
background-color: #303030;
list-style: none;
margin: auto;
font-size: 20px;
margin-top: 50px;
margin-bottom: 30px
}
ul.links {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li.links{
display: inline;
}
a.links{
font-size: 20px;
font-family: 'Muli', sans-serif;
color: #8c8c8c;
margin-right: 18px;
text-decoration: none;
}
a:hover {
background-color: #555;
color: white;
}
我还有一个一般性问题，关于导航栏一直让我感到困惑的事情。我应该设置哪些元素的样式来设置每个属性？正如您所看到的，例如，我在 Anchor 元素上指定了字体系列和字体大小，而在 Nav 元素上指定了容器大小，在列表元素中指定了 display: inline。这让我很困惑，我确信这将是一些错误的根源。我的教授坚持要我将所有这些元素用于导航栏顺便说一句(导航栏，其中嵌套了一个 UL，列表中嵌套了 anchor )
最佳答案
所以我从 nav.NavBar 和 div.wrapperHeader 中删除了宽度，这样在放置 nav.NavBar 时就不会出现问题通过插入 .wrapperHeader > * { display: inline-block; 在与 Logo 相同的行上}。此插入代码基本上将 display: inline-block 应用于所有 .wrapperHeader 的子元素。
我已经稍微清理了你的 CSS 代码，请看下面:
关于html - 链接在导航栏中未正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45225873/
25
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 已删除，但我总
我是一名优秀的程序员,十分优秀！