見出しの位置修正をしたい

初心者です。お手柔らかにお願いします。

写真の重要なお知らせの部分を上の方に位置修正したいです。親要素内の上の高さにそろえられればいいのですが、

<div class="news navbar navbar-expand-md">
    <div class="col-2 news-important">
      <h6>重要なお知らせ</h6>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" >
      <span class="fa fa-plus-circle" ></span>
    </button> 
    <ul class="news-topic col-10" >
      <li><a href="#">
        新型コロナウイルス感染者の発生について</a></li>
      <li><a href="#">オーストラリアの森林火災被害に対する支援金寄付について</a></li>
      <li><a href="#">「令和元年台風第19号」被害に対する支援金寄付について</a></li>
      <li><a href="#">「令和元年台風第15号」被害に対する支援金寄付について</a></li>
      <li><a href="#">「令和元年台風第15号」被害に対する支援物資のお届けについて</a></li>
      <li><a href="#">当社ブランド画像を用いて個人情報の提供を求めるサイトにご注意ください</a></li>
    </ul>
  </div>

cssにて

.news-important {
  vertical-align: top;
　padding:0;
}

としましたが変わりませんでした。

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

回答2件

HTML
1<div class="news navbar navbar-expand-md">

の部分を

HTML
1<div class="news navbar navbar-expand-md align-items-start">

と直接入力したら変わりました。

ただ、<div class="col-2 news-important">の部分に同じコードを入れたのですが変化なく、その理由がまだわかってません、、、。

投稿2020/07/19 12:42

itokin

総合スコア14

new1ro

2020/07/19 23:05

まず「Bootstrap」を使っていますよね? (違うなら、ご指摘ください。) その前提で↓を書いてみます。 [1] Bootstrap利用時に、「.align-items-start」というクラスを指定すると、 align-items: flex-start !important; が指定されます。参照: https://getbootstrap.com/docs/4.5/utilities/flex/#align-items [2] 「align-items」は「display: flex;」や「display: grid;」とセットで指定しなければ意味を成しません。 https://developer.mozilla.org/ja/docs/Web/CSS/align-items 「.news-important」「.col-2」にも、「display: flex;」などが指定されていなければ、「.align-items-start」というクラスを指定しても、画面上に何の変化も生じない状態となってしまいます。

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

ベストアンサー

こちらでいかがでしょうか?

CSS
1.news-important {
2  /* vertical-align: top; */
3  padding:0;
4  display: flex;
5  align-items: flex-start;
6}

<div class="news navbar navbar-expand-md">にどのようなCSSが指定されているかがわかると、回答の精度が上げられると思います。

追記:
もし、Bootstrapを使っているなら、.navberに、「align-items: center;」という記述があるようです。
以下のようにCSSを追加するか、

CSS
1.news.navbar {
2  /* flex-start、もしくはbaseline */
3  align-items: flex-start;
4}

HTML側で以下のように指定してみてください。
<div class="news navbar navbar-expand-md align-items-start">

投稿2020/07/18 22:18

編集2020/07/19 22:55

new1ro

総合スコア4528

itokin

2020/07/19 12:25

試しましたが変わりませんでした <div class="news navbar navbar-expand-md">のCSSは .navbar { background-color: #ffffff; } .news { margin:0px 5rem; list-style: none; border-bottom: 1px solid #d8d8d8; } としています。