小要素を親要素におさめる方法がわかりません。

前提・実現したいこと

写真のNike,NikePlusと書かれているリストを赤いボーダーで囲まれている親要素の中におさめたいです。

発生している問題・エラーメッセージ

下記通りのソースコードを作ったのですが小要素が親要素からはみ出てしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Nike Free.Nike.com(JP)</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <header>
10      <div class="container">
11        <div class="header-1" >
12         <div class="header-left">
13           <ul>
14             <li class="Nike">Nike</li>
15             <li class="NikePlus">Nike Plus</li>
16           </ul>
17         </div>
18         <div class="header-right">
19           <a href="#">NikePlusに新規登録/ログイン</a>
20           <a href="#">ヘルプ</a>
21         </div>
22       </div>
23      </div>
24    </header>
25  </body>
26</html>
27

CSS
1* {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
8}
9
10a {
11  text-decoration: none;
12}
13
14.header-1{
15  height:39px;
16  background-color: #ffffff;
17  border: 2px solid red;
18  font-size:12px;
19  position:relative;
20
21}
22
23.header-left{
24  float:left;
25  text-align: center;
26}
27
28.header-right{
29  float:right
30}
31
32.header-1 li{
33  color: #8D8D8D;
34  line-height:39px;
35  list-style: none;
36  float:left;
37}
38
39.header-left li{
40  border:1px solid #8D8D8D;
41  margin-right: : 0px;
42}
43
44.Nike{
45  padding: 12px 34px;
46  position: relative;
47  top:0px;
48}
49
50.NikePlus{
51  padding: 12px 35px;
52}
53

試したこと

position:relative;を使って基準を親要素に設定し、小要素の位置を変えてみましたが治りませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

float： left；による回り込みの解除ができていません。

css
1.header-left ul {
2	overflow: hidden;
3}
4.header-1 {
5	overflow: hidden;
6}

それに加え、

css
1.header-1{
2  height: 39px;
3}

ここの高さ指定を解除すれば良いと思うのですが、

高さ39pxの中に納めたいという意図であれば、以下で

css
1.header-1 li {
2    height: 35px;/* 39px - (2px * 2) */
3    display: flex;
4    align-items: center;
5}

結構、無駄なCSSが多い気がします…。

投稿2019/02/13 14:46

kszk311

総合スコア3404

子要素のfloatをはみ出させないようにするにはclearfixと呼ばれている方法が
あります。

css
1.clearfix::after {
2  display: block;
3  clear: both;
4  content: "";
5}

このクラス（clearfix）をhtmlのheader-1に追加し、cssの.header-1から

css
1height:39px;

を削除してください。

投稿2019/02/13 14:44

cerfweb

総合スコア1899

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！