“ NAV”中的按钮未与兄弟姐妹内联显示

迈克·巴卡

我正在创建一个简单的“导航”菜单,但无法使我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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

订购未保存的兄弟姐妹

来自分类Dev

悬停以显示兄弟姐妹元素但轻弹

来自分类Dev

以表格形式显示html兄弟姐妹

来自分类Dev

内联块div中的子元素更改了父级兄弟姐妹的位置

来自分类Dev

flexbox 中的中心兄弟姐妹

来自分类Dev

在 XPath 中查找兄弟姐妹

来自分类Dev

从 href 中删除兄弟姐妹类

来自分类Dev

如何识别图中未连接的兄弟姐妹?

来自分类Dev

如何为未悬停的兄弟姐妹设置样式?

来自分类Dev

在其先前的兄弟姐妹下方显示替代项

来自分类Dev

在其先前的兄弟姐妹下方显示替代项

来自分类Dev

序幕与兄弟姐妹的关系?

来自分类Dev

获取兄弟姐妹的PID

来自分类Dev

创建sqlarchicalid兄弟姐妹

来自分类Dev

兄弟姐妹体内的硒

来自分类Dev

遍历兄弟姐妹的子类

来自分类Dev

使用jQuery从兄弟姐妹中累加值

来自分类Dev

从其他兄弟姐妹中删除课程

来自分类Dev

XPath:查找孩子和兄弟姐妹中的首次出现

来自分类Dev

在React中的兄弟姐妹之间进行交流

来自分类Dev

如何获得不同DIV或SPAN中的兄弟姐妹?

来自分类Dev

如何获取数组中的兄弟姐妹ID?

来自分类Dev

通过javascript中的兄弟姐妹链接对象

来自分类Dev

XPath:查找孩子和兄弟姐妹中的首次出现

来自分类Dev

XCTest(UI测试)中查询的父母和兄弟姐妹

来自分类Dev

无法在ReactJS中相互更改兄弟姐妹的值

来自分类Dev

Python 将 XML 兄弟姐妹放入字典中

来自分类Dev

通过 Rails 中的连接表查找兄弟姐妹

来自分类Dev

防止在javascript中触发父母的兄弟姐妹的事件