Question

我有以下（最小化）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>

根据本教程：How do I render <li> side-by-side?

应该将李的显示并排显示。

据我所知，我已正确实施，但它无效。我犯了错误，我错过了什么或者有什么理由不起作用吗？

PS我希望它从右侧开始。

Answer 1

将您的CSS更改为

ul.login {
  margin:0;
  width:600px;
  height:60px;
  list-style:none!important;
 }

ul.login li{
  display:inline;
  color:red;
}

Answer 2

从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>

Answer 3

您总是可以使用定位（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>

注意

正如你所说，你已经删除了很多标记，我推测你的一些语法错误是由于这个（即额外的div标签/等）。但是我已经为你删除了

Answer 4

尝试这个..

＆＃13;

.wrap {
  float:right;
}
ul.login {
  margin:0;
  width:600px;
  height:60px;
  list-style:none!important;
 }

ul.login li{
  display:inline;
  color:red;
}

＆＃13;

<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>

＆＃13;

Answer 5

<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>

并排放置HTML

5 个答案: