导航菜单中的间距（HTML/CSS）_Html_Css_Spacing

导航菜单中的间距（HTML/CSS）

html css

导航菜单中的间距（HTML/CSS）,html,css,spacing,Html,Css,Spacing,我尝试在锚和li中填充/边距，但没有任何效果。如何在每个菜单选项之间添加间距我的HTML，是否将其分配到错误的位置？： .body-color { background: rgb(27,39,57) } a { text-decoration: none; color: red; padding-right: 20px; } li { display: inline-block; padding-right: 30px; }

我尝试在锚和li中填充/边距，但没有任何效果。
如何在每个菜单选项之间添加间距

我的HTML，是否将其分配到错误的位置？：

.body-color {
    background: rgb(27,39,57)
}

a {
    text-decoration: none;
    color: red;
    padding-right: 20px;

}

li {
    display: inline-block;
    padding-right: 30px;
}   

#menu {
    text-align: center;
    background-color: white;
    padding-bottom: 100px;
}


我的网站

我认为添加

显示：内联块到菜单项可能会起作用。
假设您不是针对edge或IE，display:flex是一种更好的方法
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css">
    <title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"><h1>
<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portrait</a></li>
        <li><a href="#">Product Showcase</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</body>
</html>

将导致每个列表项的间距相等。为了使用flex练习基本的css技能，我将看一看。他们有很多关于flex基本用法的优秀教程
 检查此链接，您可以向任何方向添加填充

}你试过这个吗？您不必指定宽度，但将为每个元素管理相等的宽度
li a { padding: 50px;

答案解决了。跟随

。车身颜色{
背景：rgb（27,39,57）
}
#菜单{
文本对齐：居中；
背景色：白色；
填充底部：100px；
左边距：0；
左侧填充：0；
}
李{
显示：内联块；
左侧填充：15px；
右侧填充：15px；
}  
a{
文字装饰：无；
颜色：红色；
}







。车身颜色{
背景：rgb（27,39,57）
}
a{
文字装饰：无；
过渡：.3s；
}   
#菜单{
文本对齐：居中；
背景色：白色；
填充底部：100px；
}
#菜单ulli{
显示：内联块；
} 
#菜单ulli+li{
左边距：30px；
}
#菜单ulli a{
颜色：#000；
} 
#菜单：悬停{
颜色：#f10；
}

我的网站






如果它不需要支持IE 9或更低版本。我建议flex：

*{margin:0；padding:0；}
#菜单{
位置：相对位置；
显示器：flex；
对齐内容：空间均匀；/*“周围空间”表示刚刚填充的空间*/
宽度：100%；
/*列表导航规范化*/
列表样式：无；
保证金：0；
填充：0；
/*附加选项*/
对齐项目：居中；
对齐内容：居中对齐；
/*为了在本例中清晰起见，请在完成后删除此项*/
背景色：rgba（0,0,0,1）；
}
#菜单里{
显示：继承；
/*为了在本例中清晰起见，请在完成后删除此项*/
背景色：rgba（0,0,0,1）；
}
#菜单a{
填充：10px；
文字装饰：无；
颜色：红色；
/*为了在本例中清晰起见，请在完成后删除此项*/
背景色：rgba（0,0,0,1）；
}





请也包括您的HTML。请参阅。您应该添加HTML代码以标识应用标记的元素，并选择代码。也许reset.css
中有什么东西覆盖了你的风格？此外，结束标记缺少斜杠：。遗憾的是，这并没有扩展每个导航选项（菜单、肖像、产品展示、联系人）之间的空间。这似乎与原始代码没有根本区别。问题是什么？为了解决问题，你做了哪些改变？
li a { padding: 50px;

ul {
    width: 100%;
    display: table;
    table-layout: fixed; /* the magic dust that ensures equal width */
    background: #ccc
}
ul > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}
ul > li > a {
    display:block;
    padding:50px;
}