Question

我的导航包含以下HTML代码：

<ul id="nav">
  <li><a>home</a></li>
  <li><a>login</a></li>
  <li class="selected"><a>shop</a></li>
  <li><a>help</a></li>
</ul>

我想要完成的是具有“选定”类的元素始终显示在导航的左侧。

因此，如果选择商店，渲染的导航将如下所示：
店铺登录帮助

如果选择了帮助：
帮助家庭登录商店

我的css：

#nav li {
display: inline; }

#nav li.selected {
  width: 230px;
  text-align: center;
  background: #b52830;
  margin-right: 10px;
  float: left;
  display: block; }

  #nav li.selected a {
    display: block;
    padding-right: 0; }

    #nav li.selected a:hover {
      color: #fff; }

适用于某些浏览器但不适用于所有浏览器。有什么想法吗？

如果它不起作用，则所选元素移动到其余元素之下......

选择商店：
主页登录帮助
店

Answer 1

如果ul＃nav总是有固定的宽度，你可以告诉.selected左浮动，所有其他元素浮动。

Answer 2

我会尽量避免像这样组合内联和块显示。如果你写下如果它不起作用会是什么样子会很有帮助。

Answer 3

另一种选择是使用编程语言（如php或javascript）按照列表顶部的“选定”类顺序打印链接列表。

向左浮动会将第一个有序的li放在与其他li元素相同的行的最左边。相反，右移将使第一个有序的李最右边。

您如何将“选定”课程应用于适当的李？

始终有一个带有css的浮动列表元素

3 个答案: