Question

如何设置此标记的样式：

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

进入如下所示的内联菜单（导航栏），左边的第一个元素，右边的剩余部分。

A                   B C D

不改变元素的顺序。可以吗？感谢。

Answer 1

喜欢这个？

＆＃13;

ul{
  text-align: right;
}

ul li:first-child{
  float:left;
}

ul li{
  display: inline-block;
}

＆＃13;

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>J</li>
  <li>K</li>
</ul>

＆＃13;

Answer 2

首先说出你的第一个li元素。

显示ul li inline-block

风格li.first比其他更广泛

Answer 3

您可以使用:first-child伪选择器定位第一个li。

使用样式：

li{
    display: inline;
}
li:first-child{
    margin-right: 40px;
}

说明：它只会选择first li并向其应用margin-right，从而将其他人移至右侧并将其保持在左侧。

请参阅小提琴：“http://jsfiddle.net/1b2d4qr9/”

Answer 4

是的，这可以在导航结构中工作，第一个项目将向左浮动，而其他项目将在导航的最右侧对齐

ul{padding:0;margin:0;width:100%;list-style:none;text-align:right;}
ul li:first-child{
    float:left;
}
li{display:inline-block;padding;0;margin:0;}

请参阅http://jsfiddle.net/sjmcpherso/Lr3bjwra/

Answer 5

尝试这个它会帮助你。

   ul
{
text-align:right;
}
ul li:first-child{
  float:left;
}

ul li{
  display: inline-block;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
 
</ul>

创建导航栏菜单而不更改元素顺序？

5 个答案: