按钮＆＃34; NAV＆＃34;不与兄弟姐妹一起显示内联

Question

我正在创建一个简单的导航菜单，我无法让我的button在兄弟li元素旁边显示内联。

我需要内联和右浮动的所有三个元素。

HTML

<nav>
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>
<button>A Button</button>
</nav>

这是CSS

nav {
    float: right;
}

li {
    display: inline-block;
}

button {
    display: inline-block;
}

这是小提琴--- https://jsfiddle.net/et8omw2c/

Answer 1

好的2种方式。

我建议您更改标记，并在li元素中包含按钮，如：

<nav>
   <ul>
     <li>List Item 1</li>
     <li>List Item 2</li>
     <li><button>A Button</button></li>
   </ul>
 </nav>

或更改css，我不建议：

nav {
float: left;
padding:0;
margin:0;
width:100%;
}

li {
display: inline-block;
float:left;
}

button {
display: inline-block;
float:left;
}

Answer 2

也将内联块应用于ul元素。

Answer 3

这是因为您的ul元素是display:block。添加float:right或使用display:inline-block即可解决您的问题。 使用此CSS

ul{
float:right
}

或

ul{
display:inline-block;
}