我正在创建一个简单的“导航”菜单,但无法使我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/
好的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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句