Question

如何将我的所有菜单项（除了家）放在右侧，而不会将其顺序颠倒（即将功能保留为第一项）。

请参阅下面的代码：

* { box-sizing: border-box; }
body { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
.header {padding: 10px;}
.header ul {list-style: none;}
.header ul li {display: inline}

<div class="header">
    <ul>
        <li><a href="#">Home</a>
        <li><a href="#">Features</a>
        <li><a href="#">Pricing</a>
        <li><a href="#">Sign up</a>
        <li><a href="#">Login</a>
    </ul>
</div>
<div class="shout">
<a href="#">Start</a>
</div>

Answer 1

如果要在右侧移动整个菜单，可以使用float：right来表示ul元素。在你的情况下，它将是：

.header ul {float: right;}

工作小提琴示例：https://jsfiddle.net/vpygzyyx/1/

编辑：这是一个更新，左侧是HOME，标题右侧是菜单的其余部分：

.header ul {list-style: none; text-align:right;}
.header ul li {display: inline}
.header ul li:first-child{float:left}

小提琴演示链接： https://jsfiddle.net/vpygzyyx/2/

Answer 2

在direction: rtl;上使用float: left;和li:first-child。请参阅代码段

＆＃13;

* {
  box-sizing: border-box;
}
body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10pt;
  color: #828282;
}
.header {
  padding: 10px;
}
.header ul {
  list-style: none;
}
.header ul li {
  display: inline
}
ul {
  direction: rtl;
}
li:first-child {
  float: left
}

＆＃13;

<div class="header">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Features</a>
    </li>
    <li><a href="#">Pricing</a>
    </li>
    <li><a href="#">Sign up</a>
    </li>
    <li><a href="#">Login</a>
    </li>
  </ul>
</div>
<div class="shout">
  <a href="#">Start</a>
</div>

＆＃13;

Answer 3

您必须为此制作两个菜单，并且您可以实现输出，请尝试以下代码： -

<div class="header">
    <ul>
        <li><a href="#">Home</a></li>
    </ul>
    <ul class="right-menu">
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Sign up</a></li>
        <li><a href="#">Login</a></li>
    </ul>
</div>

Css将是： -

.header .right-menu{
   float: right;
}

它可能对你有帮助。

Answer 4

在此JS Fiddle中，将.header权限text-align然后float:left提供给列表的第一个孩子 - 您忘了关闭{{1}标签

＆＃13;

li

＆＃13;

* {
  box-sizing: border-box;
}
body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10pt;
  color: #828282;
}
.header {
  padding: 10px;
  text-align: right;
}
.header ul {
  list-style: none;
}
.header ul li {
  display: inline
}
.header ul li:first-child {
  float: left
}

＆＃13;

Answer 5

将您的ul拆分为.left-menu for Home，将.right-menu拆分为其他项，然后将float:left添加到left-menu和float:right到right-menu，最后将clearfix添加到标题中以强制将其他元素放在菜单下方：

* { box-sizing: border-box; }
body { font-family:Verdana, Geneva, sans-serif; ; color:#828282; }
.header {padding: 10px;}
.: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.header ul {list-style: none;}
.header ul.left-menu {float: left;}
.header ul.right-menu {float: right;}
.header ul li {display: inline}

<div class="header">
    <ul class="left-menu">
        <li><a href="#">Home</a></li>
    </ul>
    <ul class="right-menu">
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Sign up</a></li>
        <li><a href="#">Login</a></li>
    </ul>
</div>
<div class="shout">
<a href="#">Start</a>
</div>

右对齐菜单项而不使用CSS反转它们

5 个答案: