将HTML并排放置
将HTML并排放置
提问于 2015-03-06 13:34:27
我有以下(最小化) 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>根据本教程： side-by-side?
应该使李的展示并排。
据我所见，我已经正确地实现了它，但它不起作用。我是否犯了一个错误，我是遗漏了什么，还是有什么原因不起作用？
我要从右手边开始。
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-03-06 13:38:53
将css更改为
ul.login {
margin:0;
width:600px;
height:60px;
list-style:none!important;
}
ul.login li{
display:inline;
color:red;
}Stack Overflow用户
发布于 2015-03-06 13:45:44
从ul.login css中删除宽度属性，并删除第二个关闭的</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>Stack Overflow用户
发布于 2015-03-06 13:41:39
你可以使用定位代替(海事组织会比浮动元素更好)：
.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
正如您所说的，您已经删除了大量的标记，我认为您的一些语法错误是由于这个原因(即额外的div标记/等等)。但我已经帮你把这个拿走了
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28899901
复制相关文章
相似问题
腾讯云开发者
