并排放置HTML
[英]Placing HTML li side by side
问题描述
I have the following (minimised) HTML: 
我有以下（最小化）HTML：
<html>
<head>
<style type="text/css">
.wrap {
float:right;
}
ul.login {
margin:0;
width:140px;
height:60px;
list-style:none!important;
}
ul.login li{
float:left;
color:red;
}
</style>
</head>
<body>
<div class="wrap" >
<ul class="login">
<li>Logged in as </li>
<li><a>Ghost Out</a></li>
<li><a>Admin Home</a></li>
<li><a>Alumni Home</a></li>
<li><a>Your profile</a></li>
<li><a>Log out</a></li>
<li><a>to your profile</div></div></a></li>
</ul>
</ul>
</div>
</body>
</html>
Which according to this tutorial: How do I render <li> side-by-side? 根据本教程： 如何并排渲染<li>？
should make the li's display side by side. 应该让李的显示并排。
As far as I can see I have implemented it correctly, but it is not working. 据我所知，我已正确实施，但它无法正常工作。 Have I made a mistake, am I missing something or is there a reason this is not working? 我犯了错误，我错过了什么或者有什么理由不起作用吗？
PS I want it to start from the right hand side. PS我希望它从右侧开始。
5 个解决方案
解决方案1
2 已采纳 2015-03-06 13:38:53
Change your css to 将你的CSS更改为
ul.login {
margin:0;
width:600px;
height:60px;
list-style:none!important;
}
ul.login li{
display:inline;
color:red;
}
解决方案2
1 2015-03-06 13:45:44
remove width property from ul.login css and remove second closing </ul> tag 从ul.login css中删除width属性并删除第二个结束</ul>标记
<head>
<style type="text/css">
.wrap {
float:right;
}
.login {
margin:0;
height:60px;
list-style-type: none;
}
.login li
{ float:left;
color:red;
display: inline;
margin-right:10px;
}
</style>
</head>
<body>
<div class="wrap" >
<ul class="login">
<li>Logged in as </li>
<li><a>Ghost Out</a></li>
<li><a>Admin Home</a></li>
<li><a>Alumni Home</a></li>
<li><a>Your profile</a></li>
<li><a>Log out</a></li>
<li><a>to your profile</div></div></a></li>
</ul>
</div>
</body>
</html>
解决方案3
0 2015-03-06 13:41:39
You could always use positioning instead (which IMO would be better than floating elements): 您可以始终使用定位（IMO比浮动元素更好）：
.wrap { position: absolute; top: 5px; right: 5px; } .wrap .login { list-style: none; display: inline-block; } .wrap .login li { display: inline-block; }
<html> <body> <div class="wrap"> <ul class="login"> <li>Logged in as</li> <li><a>Ghost Out</a> </li> <li><a>Admin Home</a> </li> <li><a>Alumni Home</a> </li> <li><a>Your profile</a> </li> <li><a>Log out</a> </li> <li><a>to your profile</a> </li> </ul> </div> </body> </html>
Note 注意
As you said that you had removed a lot of the markup, I presumed that some of your syntax errors were due to this (ie extra div tags/etc). 正如你所说，你已经删除了很多标记，我推测你的一些语法错误是由于这个（即额外的div标签/等）。 But i've removed this for you 但我已经为你删除了这个
解决方案4
0 2015-03-06 13:43:02
try this one.. 试试这个......
.wrap { float:right; } ul.login { margin:0; width:600px; height:60px; list-style:none!important; } ul.login li{ display:inline; color:red; }
<html> <head> </head> <body> <div class="wrap" > <ul class="login"> <li>Logged in as </li> <li><a>Ghost Out</a></li> <li><a>Admin Home</a></li> <li><a>Alumni Home</a></li> <li><a>Your profile</a></li> <li><a>Log out</a></li> <li><a>to your profile</div></div></a></li> </ul> </div> </body> </html>
解决方案5
0 2015-03-06 13:56:04
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.