我有一个固定的透明导航栏，我正在尝试获取图像，甚至只是左对齐的文本。以下是我使用的html代码和css代码:
----------------------------------------html代码-- ----------------------------------------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Home</title>
</head>
<body>
<div id="navigation">
<b>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Our Apps</a>
<a href="#">Support</a>
<a href="#">Press</a>
<a href="#">About</a>
</b>
</div>
<div id="content">
Content Here!
</div>
</body>
</html>
-------------------------------------------- --CSS代码----------------------------------------
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
text-align: center;
top: 0;
width: 100%;
color: #ffffff;
height: 20px;
padding-top: 5px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
#navigation a:visited {
color: white;
}
#content {
width: 80%;
padding-top: 70px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
感谢您的帮助! -亚伦
最佳答案
你可以使用 css floats。
CSS
#navigation div.block-left {
float: left;
}
#navigation div.block-right {
float: right;
}
HTML
<div id="navigation">
<div class="block-left">
Put stuff here!
</div>
<div class="block-left">
<b>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Our Apps</a>
<a href="#">Support</a>
<a href="#">Press</a>
<a href="#">About</a>
</b>
</div>
因为两个 block 都向左浮动，所以它们将按从左到右的顺序堆叠。
此外，您不应该再使用它，因为它已被弃用。更好的选择是或
关于html - 将图像左对齐放在固定的导航栏上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25860799/