ここから本文です

下記、HTML、CSSを入力すると何故かulの中の各liが表示されない状態になってしまい...

hid********さん

2019/4/2200:23:07

下記、HTML、CSSを入力すると何故かulの中の各liが表示されない状態になってしまいます。
何故そういう現象が起こっているのか理由を教えていただけないでしょうか?

大変不思議です。
よろしくお願いします。


【HTML】
<!DOCTYPE html>
<html>
<head>
<title>Airbnbcopy</title>
<link rel="stylesheet" type="text/css" href="Airbnb.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi..." integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
<header>



<div class="header-inner">
<div class="header-container">
<input id="input02" type="text" placeholder="検索"><!--
/input間で改行したい場合はコメントアウト必須/
--> <input id="submit02" type="submit" value="">

</div>

<div class="list">
<ul class="xp">
<li><a class="link" href="#">ホトをはじめる</a></li>
<li><a class="link" href="#">ヘルプ</a></li>
<li><a class="link" href="#">登録する</a></li>
<li><a class="link" href="#">ログイン</a></li>
</ul>
</div>

</div>


<div class="alert alert-warning alert-dismissible fade show" role="alert">
今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="main">
<div class="middle">
<H1>旅を贈ろう。</H1>
<H3>Airbnbギフトカードで、世界をぐんと身近に</H3>
</div>
</div>

</header>




<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper...." integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min..." integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>


【CSS】

.logo {
float: left;
}

.home {
padding-top: 5px;
}

.glass {
size: 10%;
}

.header-inner {
display: flex;
height: 80px;
align-items: stretch;

}

.header-container {
background-color : blue;
padding: 25px 10px;
width: 204px;

}

.list {

width: calc(100% - 204px);

}


.xp {
background-color: red;
display: flex;
justify-content: flex-end;
margin: 0;
height: 100%;
align-items: center;

}

li {
display: inline-block;
padding: 0 0 0 0;
list-style: none;
}




.alert-warning {
margin: 0 ! important; //意味不明//
}

img {
float : left;
}

input {
margin-right: 1150px;
float: left;
}

li {
padding : 0 0 0 0;
list-style: none;
float : left;
padding-bottom: 120px;
display: inline-block;
}

.main {
background-image: url(pic.jpg) ;
background-size: cover;
z-index: 1;
height: 600px;
width: 100%;

}

.middle {
margin-left: 400px;
padding-top: 200px;
}

H1 {
z-index: 2;
color: white;
font-size: 50px;
}

H3 {
color: white;
}

閲覧数:
55
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ssr********さん

2019/4/2209:44:31

原因は.xpの中のalign-items: center;ですね。
align-items: stretch;に変更してください。
それと、liが2つありますし、liにfloatがかかってますし、padding: 0 0 0 0;とか意味不明なものもありますし、それなのに同じliにpadding-bottomがありますし、.glassにはsizeとか言う不明なプロパティが付与されていますし、.alert-warningにある!inportantのエクスクラメーションマークの後ろに意味の分からないスペースが入っていますし、とにかくボロボロです。
ソースコードも非常に読みにくいですので、可読性を高めることをお勧めします。

  • 質問者

    hid********さん

    2019/4/2212:08:19

    回答ありがとうございます。
    大変読みにくくて申しわけありませんでした。
    精進していきたいと思います。

    align-items: center; が原因という事ですが、ちなみに文字が表示されない理屈はどういった理由なのでしょうか?

  • その他の返信を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2019/4/25 23:20:47

すごく初心者な自分に丁寧な回答をいただき、ありがとうございました。
あまりにもレベルが高い回答者の方だったので申し訳なさもありつつ、大変感動しました!
教えていただいたことを実践し、上達した際にはまたコードを見ていただきたいなとも思いました。
その時はまた回答依頼をださせてもらえたらうれしいです。

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる