无法以 100% 的宽度向右浮动导航栏
[英]Unable to float nav-bar right with 100% width
问题描述
When I float the below UI element to right.
当我将下面的 UI 元素向右浮动时。 the width no longer remains 100% that is stretched across the page.宽度不再保持 100% 在页面上拉伸。 Below is my HTML and CSS code.下面是我的 HTML 和 CSS 代码。
<!DOCTYPE html>
<html>
<head>
<title>AI</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="main-container">
<div id="image">
<div id="nav-bar">
<ul>
<li>Home</li>
<li>Team</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
<img src="D75_9070.jpg">
</div>
</div>
</body>
</html>
CSS CSS
#main-container {
background-color: black;
position: fixed;
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#nav-bar {
position: fixed;
top: 10px;
left: 10px;
width: 100%;
}
ul {
margin: 10px;
padding: 20px;
background-color: white;
}
li {
padding-left: 20px;
padding-right: 20px;
list-style: none;
display: inline;
}
3 个解决方案
解决方案1
1 2016-04-16 12:11:10
If a element has 100% width then floating it is meaningless (well mostly meaningless).如果一个元素有 100% 的宽度，那么浮动它是没有意义的（大部分是无意义的）。
For something that is meant to stretch the entire width, floating it will make the parent container collapse, but it will not have any affect in terms of moving content to one side or another.对于旨在拉伸整个宽度的东西，浮动它会使父容器折叠，但不会对将内容移动到一侧或另一侧产生任何影响。
What I think you are looking for is this.我认为你正在寻找的是这个。
#nav-bar ul {
float:right;
}
解决方案2
0 已采纳 2016-04-16 12:12:07
You could set the background color to your #nav-bar instead, like this, while floating the ul .您可以将背景颜色设置为#nav-bar ，就像这样，同时浮动ul 。
#main-container { background-color: black; position: fixed; height: 100%; width: 100%; } body { margin: 0; padding: 0; } img { display: block; max-height: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } #nav-bar { position: fixed; top: 10px; left: 10px; right: 10px; background-color: white; } ul { margin: 10px; padding: 20px; float: right; } li { padding-left: 20px; padding-right: 20px; list-style: none; display: inline; }
<div id="main-container"> <div id="image"> <div id="nav-bar"> <ul> <li>Home</li> <li>Team</li> <li>About us</li> <li>Contact us</li> </ul> </div> <img src="http://lorempixel.com/50/50/animals"> </div> </div>
解决方案3
0 2016-04-16 12:12:31
Simple add text-align: right;简单添加text-align: right; to ul到ul
ul {
margin: 10px;
padding: 20px;
background-color: white;
text-align: right;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.