Html 如何使图像和文本在同一行上？

我有一个导航条，我正试图让标志和文字彼此在同一条线上，链接也在同一条线上。另外，我的链接顺序错误，所以我想知道为什么会这样，以及如何修复它

这就是它看起来的样子：

以下是我的html代码：

#导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#D4；
}
#李海军{
浮动：对；
}
#李娜{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
#导航
/*悬停时将链接颜色更改为#111（黑色）*/
李娜：停下来{
背景色：#111；
}

数字桶公司

主页
课程
登录
培训师
企业级

• p

  是

  ul

  的有效子项，它是错误的html，因此在

  nav

  id中移动p标记
• 其次，您可以使用

  flexbox

  设置布局，并从

  li

#导航{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
溢出：隐藏；
背景色：#D4；
}
#导航ul{
列表样式类型：无；
保证金：0；
填充：0；
}
#李海军{
/*浮动：对*/
显示：内联块；
}
#李娜{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
#导航李a：悬停{
背景色：#111；
}

数字桶公司


主页
课程
登录
培训师
企业级

您可以删除所有

float

属性并使用

flexbox

。 将flexbox属性添加到

ul

，使其占据整个空间并将项目对齐中心；清除你的p的遗传边缘，让它增长；从

li

项中删除

float:right

还要注意的是，您不应该在

#导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#D4；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
#导航p{
柔性生长：1；
保证金：自动；
}
#李娜{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
#导航
/*悬停时将链接颜色更改为#111（黑色）*/
李娜：停下来{
背景色：#111；
}

数字桶公司

主页
课程
登录
培训师
企业级

添加了新的CSS，希望对您有所帮助

p{
保证金：0；
显示器：flex；
对齐项目：居中；
空白：nowrap；
}
#导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#D4；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
#李海军{
浮动：对；
}
#李娜{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
空白：nowrap；
}
#导航
/*悬停时将链接颜色更改为#111（黑色）*/
李娜：停下来{
背景色：#111；
}

数字桶公司

主页
课程
登录
培训师
企业级

• 最好只把
  放在

• 选中flexbox

*{
保证金：0；
填充：0；
框大小：边框框；
}
#导航{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景色：#D4；
}
#导航p{
身高：100%；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
#导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
#李海军{
浮动：左；
}
#李娜{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
/*悬停时将链接颜色更改为#111（黑色）*/
李娜：停下来{
背景色：#111；
}

数字桶公司


主页
课程
登录
培训师
企业级

我简化了您的代码片段并重写了css。请注意，将

放在

下是无效的。介绍，非常适合导航。您不必对所有内容进行浮动

float:right

将第一个元素放在最右边，这就是菜单顺序相反的原因。你可以改变方向