2つの要素を1つのシーケンスに配置する

テキストとアイコン（ログイン、ショップ）を「ロゴ」と同じレベルにしたいだけですが、ちょうど右側にしたいと思います。私は '.shop-icon' {margin：-30px auto;}に追加してみましたが、すべてがページを破壊してから、全体の 'nav bar'と 'article'がヘッダをカバーしました。2つの要素を1つのシーケンスに配置する

私はまだ学んでいますが、始めに私は何かを壊したことを知っています。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    font-size: 62.5%; 
 
} 
 

 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    background: #2B2B2B; 
 
    font-size: 1.6rem; 
 
} 
 

 
.header-front { 
 
    max-width: 992px; 
 
    margin: 0 auto; 
 
} 
 

 
h1.logo { 
 
    color: #F6F6F6; 
 
    font-size: 4.8rem; 
 
    font-weight: 700; 
 
    text-align: left; 
 
} 
 

 
.shop-icon { 
 
    text-align: right; 
 
} 
 

 
.bag, 
 
.account { 
 
    color: #F6F6F6; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    margin: 10px; 
 
} 
 

 
.main-menu { 
 
    background-color: #F7FCFA; 
 
    width: 100%; 
 
} 
 

 
p { 
 
    color: #FFFFFF; 
 
}

<body> 
 
    <header class="header-front"> 
 
    <h1 class="logo">Logo </h1> 
 
    <div class="shop-icon"> 
 
     <a href="_blank" class="account"> 
 
      Login <i class="fa fa-user-o" aria-hidden="true"></i> 
 
      </a> 
 

 
     <a href="_blank" class="bag"> 
 
      shop <i class="fa fa-shopping-bag" aria-hidden="true"></i> 
 
      </a> 
 
    </div> 
 

 
    </header> 
 

 
    <nav class="main-menu"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </nav> 
 
    <article> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean 
 
     dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis 
 
     elit, tincidunt nec ullamcorper vitae, interdum non leo. </p> 
 
    </article> 
 
</body> 
 

 
</html>

出典

2017-10-31 k.drm

'.logo'（' h1'）と '.shop-icons'（' div'）は、両方*ブロック*の要素であるので、それらは、完全な水平空間/幅を占有します彼らは利用可能です。あなたは* inline-elements *（ 'span'）に変更することもできますし、このようにスタイルを変更することもできます（' display：inline-block'）、それぞれfloatすることもできます（ '.logo {float：left;} .shop -icon {float：right;} '）、親要素（' .header-front'）を含む要素が崩壊し、フロートをクリアする必要があります。もう一つの方法は、 'flex-box'を使用して、その親要素（' .header-front'）に 'display：flex;'を宣言することです。 – UncaughtTypeError

...しかし、 'flex-box'は「簡単な」方法であり、CSSアライメントの継承する性質について実際には何も学ばないかもしれません... – UncaughtTypeError

@UncaughtTypeError私は彼があなたが言ったようにフレックスをよくすると思います。この新しいものを学び、フローティングまたはインラインブロックの古いスタイルを試してみてください。 –

：ここ

はスニペットです。コンテナ内にdisplay:flexを指定し、要素を垂直方向に整列させるにはalign-items: centerを指定します。次に、shop-iconにflex:1を指定すると、残りのスペースが必要になり、すでに要素が右揃えになっています。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    font-size: 62.5%; 
 
} 
 

 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    background: #2B2B2B; 
 
    font-size: 1.6rem; 
 
} 
 

 
.header-front { 
 
    max-width: 992px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
h1.logo { 
 
    color: #F6F6F6; 
 
    font-size: 4.8rem; 
 
    font-weight: 700; 
 
    text-align: left; 
 
} 
 

 
.shop-icon { 
 
    text-align: right; 
 
    flex: 1; 
 
} 
 

 
.bag, 
 
.account { 
 
    color: #F6F6F6; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    margin: 10px; 
 
} 
 

 
.main-menu { 
 
    background-color: #F7FCFA; 
 
    width: 100%; 
 
} 
 

 
p { 
 
    color: #FFFFFF; 
 
}

<body> 
 
    <header class="header-front"> 
 
    <h1 class="logo">Logo </h1> 
 
    <div class="shop-icon"> 
 
     <a href="_blank" class="account"> 
 
      Login <i class="fa fa-user-o" aria-hidden="true"></i> 
 
      </a> 
 

 
     <a href="_blank" class="bag"> 
 
      shop <i class="fa fa-shopping-bag" aria-hidden="true"></i> 
 
      </a> 
 
    </div> 
 

 
    </header> 
 

 
    <nav class="main-menu"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </nav> 
 
    <article> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean 
 
     dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis 
 
     elit, tincidunt nec ullamcorper vitae, interdum non leo. </p> 
 
    </article> 
 
</body> 
 

 
</html>

出典

2017-10-31 19:49:49

ありがとう！それは、私はまだフレックスボックスをトレーニングする必要があります –

@ k.drm welcome;）そして、私はあなたが複雑なレイアウトを簡単に作るための強力なツールだからそれについてもっと読むことをアドバイスします。 –

あなたはshop-icon要素にpositionabsoluteを設定することができます。

.shop-icon { 
    position: absolute; 
    left: 120px; 
    top: 26px; 
}

目的の場所は、ページの右側にある場合は、left位置の代わりに、right: 10pxを使用することができます。あなたは、単にフレックス使用することができます

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    font-size: 62.5%; 
 
} 
 

 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    background: #2B2B2B; 
 
    font-size: 1.6rem; 
 
} 
 

 
.header-front { 
 
    max-width: 992px; 
 
    margin: 0 auto; 
 
} 
 

 
h1.logo { 
 
    color: #F6F6F6; 
 
    font-size: 4.8rem; 
 
    font-weight: 700; 
 
    text-align: left; 
 
} 
 

 
.shop-icon { 
 
    position: absolute; 
 
    left: 120px; 
 
    top: 26px; 
 
} 
 

 
.bag, 
 
.account { 
 
    color: #F6F6F6; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    margin: 10px; 
 
} 
 

 
.main-menu { 
 
    background-color: #F7FCFA; 
 
    width: 100%; 
 
} 
 

 
p { 
 
    color: #FFFFFF; 
 
}

<body> 
 
    <header class="header-front"> 
 
    <h1 class="logo">Logo </h1> 
 
    <div class="shop-icon"> 
 
     <a href="_blank" class="account"> 
 
      Login <i class="fa fa-user-o" aria-hidden="true"></i> 
 
      </a> 
 

 
     <a href="_blank" class="bag"> 
 
      shop <i class="fa fa-shopping-bag" aria-hidden="true"></i> 
 
      </a> 
 
    </div> 
 

 
    </header> 
 

 
    <nav class="main-menu"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </nav> 
 
    <article> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean 
 
     dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis 
 
     elit, tincidunt nec ullamcorper vitae, interdum non leo. </p> 
 
    </article> 
 
</body> 
 

 
</html>

出典

2017-10-31 19:46:16 jfeferman

私は彼らが彼らが右にとどまることを望んでいると思うので、左の代わりに「右：0」を作ってください。 –

@TemaniAfif観測のおかげで。 OPがロゴの「ちょうどいい」と言っているので、私は実際には疑問に思っています。しかし、はい、希望の場所が右側にある場合は、たとえば「right：10px」を使用できます。 – jfeferman

@TemaniAfif私は誤って書いた誤解のために申し訳ありませんが、右にとどまりたいです。 –

2つの要素を1つのシーケンスに配置する

答えて

関連する問題