テキストの縦位置の指定

サイトのメニュー部分を製作中なのですが、下記のようなレイアウトの場合、赤（#cc3300）の位置の文字のみ、枠内の下付きにする事は可能でしょうか？

【ｈｔｍｌ】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <meta name="Description" content=“テスト”> <meta name="viewport" content="width=device-width, initial-scale=1">

<!--CSS-->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
<!--CSSここまで-->

</head> <body> <main> <div class="container"> <div class="box_logo"> <a href=""><img src="images/logo.png" alt="ロゴ"></a> </div> <div class=“column_group”> <div class="box_text_adress"> <p>アドレスアドレスアドレスアドレス</p> </div> <div class="info_link"> <ul> <li><a href="">あああああ</a></li> <li><a href="">あああああ</a></li> </ul> </div> </div> </div> </main>

【css】
@charset "UTF-8";

html {
color: #000;
font-size: 1rem;
font-family: "arial", "Meiryo", "ヒラギノ角ゴ", sans-serif;
}

body {
text-align: center;
background-color: #99ffff;
}

.wrap {
background-color: #FFFFFF;
max-width: 1048px;
margin: 0 auto;
}

a {
text-decoration: none;
}

a [href$=".png"] {
border: none
}

a [href$=".jpg"] {
border: none
}

a [href$=".jpeg"] {
border: none
}

main {
width: auto;
min-height: 80px;
background-image: url("../images/logo_bg.png");
background-size: cover;
background-color: #FFFFFF;
padding: 10px;
}

.container {
width: 100%;
min-height: 70px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #99ff66;
}

.box_logo {
width: 35vw;
min-height: 70px;
text-align: left;
background-color: #99ff66;
}

.box_logo img {
width: auto;
height: 100%;
object-fit: contain;
}

.column_group {
width: auto;
min-height: 70px;
text-align: right;
background-color: #996;
}

.box_text_adress {
width: auto;
min-height: 35px;
background-color: #9999cc;
}

.box_text_adress p {
white-space: nowrap;
}

.info_link {
width: auto;
min-height: 35px;
background-color: #cc3300;
}

.info_link ul {
list-style-type: none;
}

.info_link ul li {
display: inline-block;
font-size: 0.95rem;
padding: 0 0 0 1vw;
}

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

回答2件

若干強引かもしれませんが、
.info_linkのclassに

CSS
1display: flex;
2justify-content: center;
3align-items: flex-end;
4```これらを追記するのはいかがでしょうか？

投稿2021/02/24 15:44

lily_night2121

総合スコア43

hiromint

2021/02/25 02:31

ご提案ありがとうございます。前後でflex boxを使っているため、字下げのためだけにここにも使うとちょっと記述が複雑になりすぎるので…。どうもすみません、ご協力ありがとうございました。

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

こちらも若干強引かもしれませんが。。

ulの高さ・幅を確保してdisplay: table;、子要素をtable-cellにしてvertical-align: bottom;にしました。

css
1.info_link {
2    background-color: #cc3300;
3}
4
5.info_link ul {
6    list-style-type: none;
7    min-height: 35px;
8    width: 100%;
9    display: table;
10}
11
12.info_link ul li {
13    display: table-cell;
14    vertical-align: bottom;
15    font-size: 0.95rem;
16    padding: 0 0 0 1vw;
17}

もしくは今のままで、.info_link ul liのpadding調整だけでも「文字が下に寄った感」は出ると思います。
padding: 0 0 0 1vw; ⇒ padding: 10px 0 0 10px;　みたいな。

投稿2021/02/25 01:23

mai1210

総合スコア272

hiromint

2021/02/25 02:34

タグ、実際に記述して試してみたのですが、下がりませんでした。（なにか他の物が干渉してるのかな） padding調整は先立って自分でもやってみたのですが、ブラウザを拡縮するとかなり動いてしまうんですよね。 vertical-alignの様に、下に張り付かせるタグが使えたら一番いいのですが…。

mai1210

2021/02/25 03:27 編集

codepen載せておきます。こうなりましたがどうでしょうか。 https://codepen.io/marui_ol/pen/XWNVeOr paddingだけ調整した場合こうなりました。「拡縮するとかなり動いてしまう」のは、値をvwで指定しているからではないでしょうか。 https://codepen.io/marui_ol/pen/dyOJZzZ

hiromint

2021/02/26 05:23

返信ありがとうございました！余白リセットをかけると、確かに動作しました。他部分のコードをあわせて見直してみます。リキッドデザインにしたいので、余白はremで指定していました。

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

あなたの回答