我正在创建一个带有css和html的导航栏。我的列表与主标题一致。我想把它放在屏幕的右侧。我试过浮动:对,但是列表已经关闭了。有什么想法吗?
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1 class="title-text"><img class="logoimg" src="logo.png"/>Lindsay Sperring </h1>
<ul class="nav-bar">
<li class="nav-li"><a href="Index.html" class="nav-links">Home</a> </li>
<li class="nav-li"><a href="#" class="nav-links">Work</a> </li>
<li class="nav-li"><a href="#" class="nav-links">Blog</a> </li>
</ul>
</div>
</body>
</html>
CSS
h1.title-text {
color: #ffe401;
position: relative;
bottom: 20px;
display: inline;
}
.header {
position: fixed;
background-color: #90cc15;
width: 500px;
/* max-height: 70px; */
}
img.logoimg {
max-width: 50px;
position: relative;
top: 15px;
}
ul.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
position: relative;
bottom: 30px;
z-index: 1000;
/* left: 1000px; */
}
a.nav-links {
width: 60px;
color: #ffe401;
}
a.nav-links:hover {
color: #ffbb01;
}
li.nav-li {
display: inline;
}
答案 0 :(得分:0)
如何简单地添加:
.header{right: 0;}
答案 1 :(得分:0)
您编辑的代码...试试这个......让我知道......
<!DOCTYPE html>
<html>
<head>
<style>
h1.title-text {
color: #ffe401;
position: relative;
display: inline;
}
.header {
position: fixed;
background-color: #90cc15;
width: 500px;
/* max-height: 70px; */
}
img.logoimg {
max-width: 50px;
position: relative;
top: 15px;
}
ul li{
display:inline;padding-right:20px;
}
ul.nav-bar {
list-style-type: none;
display: inline;
position: relative;
z-index: 1000;
/* left: 1000px; */
}
a.nav-links {
width: 60px;
color: #ffe401;
}
a.nav-links:hover {
color: #ffbb01;
}
li.nav-li {
display: inline;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header" style="background-color:green;">
<h1 class="title-text"><img class="logoimg" src="logo.png"/>Lindsay Sperring </h1>
<ul class="nav-bar">
<li class="nav-li"><a href="Index.html" class="nav-links">Home</a> </li>
<li class="nav-li"><a href="#" class="nav-links">Work</a> </li>
<li class="nav-li"><a href="#" class="nav-links">Blog</a> </li>
</ul>
</div>
</body>
</html>
答案 2 :(得分:0)
我已将"display: inline"
更新为"display: inline-block"
并为h1和ul提供宽度,然后将"text-align: right"
添加到ul标记。
在这里,你可以看到这里;
答案 3 :(得分:0)
带&#39;显示的元素:内联&#39;属性没有任何高度宽度,因此您需要将其更改为内联块。 尝试这个CSS,它可能会有所帮助:
h1.title-text {
color: #ffe401;
display: inline-block;
}
.header {
background-color: #90cc15;
width: 500px;
}
img.logoimg {
max-width: 50px;
position: relative;
top: 15px;
}
ul.nav-bar {
list-style-type: none;
display: inline-block;
float: right;
margin-top: 30px;
}
a.nav-links {
width: 60px;
color: #ffe401;
}
a.nav-links:hover {
color: #ffbb01;
}
li.nav-li {
display: inline;
}