私のリストを整列できません

Question

私は大きな問題を抱えています。私は、私の背景色をパディングや余白をpxで設定したいときはいつでも、リストを整列できません。私はマージンやパディングを設定します。私はあなたのことをよりよく説明できるように絵を描きます。親のロゴIDにこの

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> 

かなりのSAMあなたが持っているコードです。ロゴとナビゲーション要素を浮動させ、ヘッダーにクリアフィックスを追加します。

これが役に立ちます。