boostrapの余白指定が効かない

boostrapで余白の指定をしたのですがうまく効かずこうなってしまいます↓

こうしたいのですがどうすればよいですか、（丸みや位置などは除く）教えてください。↓
自分が書いたhtml↓


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>airbob</title>
  <link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'>
  <link rel='stylesheet' href='./style.css'>
  <script src="https://kit.fontawesome.com/e178190d07.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    </div>
    <header>
      <ul>
        <li><i class="fab fa-airbnb fa-2x"></i></li>
        <li>概要</li>
        <li>準備</li>
        <li>安全</li>
        <li>マネープラン</li>
        <li class="login" class="mt-5" class="p-5px">はじめる</li>
      </ul>
    </header>
</body>
</html>

scss↓

@charset "utf-8";

header{
  ul{
    display: flex;
    li{
      list-style: none;
      padding: 0px 30px 0 0;
      font-size: 14px;
      color: #484848;
      font-family: inherit;
      line-height: 80px;
      }
    
  }
}

.fa-airbnb{
  color: #008489;
  padding-left: 30px;
  
}

.login{
  background-color: #FF385C;
  color: white;
  height: 40px;
}

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

回答1件

ベストアンサー

以下のような記述でいかがでしょうか?

CSS
1.login{
2  background-color: #FF385C;
3  color: white;
4  /* height: 40px; */
5  
6  /* 追加: ボタンっぽくみせるための記述 */
7  padding: 10px 15px; /* 内側の余白、調整してください。10pxが上下、15pxが左右です。 */
8  border-radius: 4px; /* 角丸、調整してください */
9  display: inline-block; /* 不要かもしれません */
10
11  /* 追加: 右端に寄せるための記述 */
12  margin-left: auto;
13}

上記CSSでのpaddingの記述と重複しますが、HTML側は以下の修正が必要そうです。
誤: <li class="login" class="mt-5" class="p-5px">はじめる</li>
正: <li class="login" class="mt-5 p-5">はじめる</li>

投稿2020/05/18 09:41

編集2020/05/18 09:45

new1ro

総合スコア4528

shu142

2020/05/18 09:50

拙い質問ながらが回答ありがとうございます。参考にしてやってみたのですが、『はじめる』の上の余白がなくなってします、また文字が隣の文字よりも少し下にずれてしまいます。どうしたら改善するでしょうか、よろしければお答えください。

new1ro

2020/05/18 12:47

liに指定している「line-height: 80px;」を削除してください。そのうえで以下を追加すると縦方向の中央揃えができると思います。 ul{ display: flex; align-items: center; /* 追加 */ } あと、最終的には<li>のなかに<a>が追加されるはずです。あらかじめ<a>を置いた状態でコーディングをしないと、2度手間になると思います。

shu142

2020/05/19 06:51 編集

new1roさんのおかげで直すことができました。 line-height: 80px;を指定していたせいで要素が80pxで固定されてしまってたんですね。ご丁寧にありがとうございました。追記『はじめる』を右側に配置したくて追加で display: flex; flex-direction: row-reverse; と書いたのですがうまく右並びになりません。どうすれば右側に並べられますか？ float: right;も効きませんでした。

new1ro

2020/05/19 10:01

li.login { margin-left: auto; } でいけるのではないかと思います。 (liの親要素にdisplay: flex;が指定されていて、width: 100%; などが指定されている前提)

shu142

2020/05/19 11:10

何度もご回答ありがとうございます。参考にして書いてみたのですが右側に並べられません、なんででしょうか。今書いているhtml <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>airbob</title> <link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'> <link rel='stylesheet' href='./style.css'> <script src="https://kit.fontawesome.com/e178190d07.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> </div> <header> <ul> <li><i class="fab fa-airbnb fa-2x"></i></li> <li>概要</li> <li>準備</li> <li>安全</li> <li>マネープラン</li> <button typy="button" ><li class="login" >はじめる</li></button> </ul> </header> </body> </html> scss @charset "utf-8"; header{ height: 82px; ul{ display: flex; align-items: center; width: 100%; li{ list-style: none; padding: 0px 15px 0 15px; font-size: 14px; color: #484848; font-family: inherit; } } } .fa-airbnb{ color: #008489; padding-left: 30px; } li.login{ background-color: #FF385C; color: white; padding: 5px 15px; border-radius: 4px; margin-top: 26px; margin-bottom: 26px; display: flex; text-decoration: none; margin-left: auto; margin-right: 30px; } 何度も質問してすみません、面倒であれば無視しても大丈夫です。

new1ro

2020/05/19 11:21

<button typy="button" ><li class="login" >はじめる</li></button> ではなく <li class="login"><button typy="button">はじめる</button></li> にしてみてください。それでとりあえず右側に寄ると思います。 ---------- 次のステップは、<button>を<a>に置き換えて、現在「li.login」に記述しているCSSの内容を、「li.login」と「li.login a」に分離することです。 /* marginはできるだけ外側、親要素に指定 */ li.login { margin-top: 26px; margin-bottom: 26px; display: flex; margin-left: auto; margin-right: 30px; } /* paddingはできるだけ内側、子要素に指定 */ li.login a { background-color: #ff385c; color: white; padding: 5px 15px; border-radius: 4px; text-decoration: none; }

shu142

2020/05/19 11:32

右に寄せることができました。それだけではなく次のステップまで教えてくれるなんて本当にありがたいです！少し行き詰まっていたのでありがとうございます。

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