Html 导航栏与徽标对齐_Html_Css

Html 导航栏与徽标对齐

html css

Html 导航栏与徽标对齐,html,css,Html,Css,我想我的导航栏跨越整个屏幕宽度（导航栏左侧有一块白色）。我还希望选项卡居中。有人能帮我吗？我是这方面的初学者，所以请详细解释。我还想把我的标志放在导航栏的左边，有人知道如何把它放在那里，还有多少像素可以显示我的标志，谢谢这是我的html代码 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c

我想我的导航栏跨越整个屏幕宽度（导航栏左侧有一块白色）。我还希望选项卡居中。有人能帮我吗？我是这方面的初学者，所以请详细解释。我还想把我的标志放在导航栏的左边，有人知道如何把它放在那里，还有多少像素可以显示我的标志，谢谢

这是我的html代码

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
<title>Connection InterFace</title>
<ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
</head>

<body>
</body>

<footer>
</footer>

之所以有空格，是因为浏览器有默认的边距和填充。因此，您可以通过执行“CSS重置”来删除填充。我只是展示了一个基本的方法来去除所有的填充物和边缘。现在，您可以为任何需要的内容设置自己的自定义填充和边距

我不知道你是否知道，但我想说的是浏览器有默认的“用户代理”样式。例如，大多数浏览器的默认字体大小是16px，但您可以像填充和边距一样覆盖它。在你的情况下，我相信尸体的边缘是8px

*{
保证金：0；
填充：0；
}
身体{
背景色：白色；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：红色；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：22px 24px；
文字装饰：无；
}
李娜：停下来{
背景颜色：栗色；
}
保险商实验室{
位置：固定；
排名：0；
宽度：100%；
}
.主动{
背景色：黑色；
}
.标志{
显示：内联块；
宽度：20%；
背景：橙色；
填充：22px 24px；
}


徽标

去掉左角的空白您可以设置边距，填充0

body {
  background-color:white;
  margin:0;
  padding:0;
}

在左侧添加徽标，根据图像的大小添加线条高度

li {
  float: left;
  line-height:7.2px;
}

在css中使用flexbox在此类场景中非常灵活。关于flexbox的更多信息，我更新了我的答案，以显示徽标。谢谢你，这非常有效，请确实将我的徽标图像放置在其中？对不起，我将徽标图像放置在何处？我更新了关于如何显示徽标图像的答案。我从..那里得到图像。。使用背景图像很好，因为我喜欢使用

背景大小：封面可以将图像放入html中。就拿这个尺寸玩吧，太好了。我很高兴它能帮上忙。请你把这个答案投上去，当你有机会的时候点击复选标记。欢迎来到Stack Overflow，祝您旅途好运。
li {
  float: left;
  line-height:7.2px;
}