我不能对齐我的列表

Question

我有很大的问题，我无法对齐我的列表，每当我想设置填充或边界在CSS中我的背景颜色只是由px变大。我设置了保证金或填充。我会设置图片，以便我可以更好地解释你。什么是做最好的办法这

header{ 
 
    background: #304852; 
 
    color: #ffffff; 
 
    border-bottom: #585858 3px solid; 
 
} 
 
header a{ 
 
    font: 1.5 Arial, Helvetica, sans-serif; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 40px; 
 
} 
 
header ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header li{ 
 
    /* float: left; */ 
 
    display: inline-block; 
 
    padding: 0 20px 0 20px; 
 

 
} 
 

 
header nav{ 
 
    /* float: right; */ 
 
    
 
    text-align: right; 
 
} 
 
#logo{ 
 
    padding-top: 50px 
 
}

<header> 
 
    <div id="logo"> 
 

 
    <img src="C:\Users\Mihajlo\Desktop\retardirani mihajlo\mm2.png" width="200px" height="200px"> 
 
    </div> 
 
     <nav> 
 
     <ul> 
 

 
     <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
</ul> 
 
</nav> 
 
</header>

Answer 1

父标志标识使用flexbox，并把该容器内的导航都在一起，然后对齐中心和太空项目他们周围。

header{ 
 
    background: #304852; 
 
    color: #ffffff; 
 
    border-bottom: #585858 3px solid; 
 
} 
 
header a{ 
 
    font: 1.5 Arial, Helvetica, sans-serif; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 
} 
 
header ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header li{ 
 
    /* float: left; */ 
 
    display: inline-block; 
 
    padding: 0 20px 0 20px; 
 

 
} 
 

 
header nav{ 
 
    /* float: right; */ 
 
    
 
    text-align: right; 
 
} 
 
#logo img{border-radius: 50%;} 
 
#logo{ 
 
    padding: 50px 0; 
 
    /*THIS WAS ADDED*/ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
}

<header> 
 
    <div id="logo"> 
 

 
    <img src="https://placehold.it/200x200" width="200px" height="200px"> 
 
       <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
    </ul> 
 
</nav> 
 
    </div> 
 

 
</header>

Answer 2

试试这个代码

CSS

header{ 
    background: #304852; 
    color: #ffffff; 
    border-bottom: #585858 3px solid; 
} 
header a{ 
    font: 1.5 Arial, Helvetica, sans-serif; 
    color: #ffffff; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 40px; 
} 
header ul{ 
    margin: 0; 
    padding: 0; 
} 
header li{ 
    /* float: left; */ 
    display: inline-block; 
    padding: 0 20px 0 20px; 

} 

header nav{ 
    float: right; 

    text-align: right; 
} 
#logo{ 
    float:left; 
} 

header.clearfix 
{ 
    content:""; 
    display: table; 
    width:100%; 
} 

HTML

<header class="clearfix"> 
    <div id="logo"> 

    <img src="C:\Users\Mihajlo\Desktop\retardirani mihajlo\mm2.png" width="200px" height="200px"> 
    </div> 
     <nav> 
     <ul> 

     <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Blog</a></li> 
</ul> 
</nav> 
</header> 

几乎是山姆e代码你有。使徽标和导航元素浮动，并添加一个清晰的标题。

希望这可以帮到..