画像と要素の横並びの方法

画像のように矢印画像を右寄せにしたいのですが、色々試しても右寄せになりません。

HTML
1      <li class="p-main__contents__ownerReview--list">
2                  <a href="#" class="p-main__contents__ownerReview--listLink">
3                    <div class="p-main__contents__ownerReview--list-txt">
4                      <div class="ownerReview__item__name">PIRKKA TABLE / Artek
5                        <p class="ownerReview__item__name-new">NEW</p>
6                        <img src="./img/serch_arrow.png" class="c-item__more--button" alt="serch_arrow">
7                      </div>
8                    </div>
9                  </a>
10                </li>

CSS
1.p-main__contents__ownerReview--list{
2  font-size: 12px;
3  line-height:70px;
4}
5.p-main__contents__ownerReview--list-txt{
6  border-bottom: dotted 4px #DEDEDD;
7  width: 90%;
8  margin-left: 25px;
9}
10
11.ownerReview__item__name{
12  color: black;
13  font-size: 17px;
14  padding-left: 10px;
15  position: relative;
16  display: flex;
17  align-items: center;
18}
19
20.ownerReview__item__name-new{
21  width: 45px;
22  height: 25px;
23  background-color: red;
24  color: white;
25  font-weight: bold;
26  display: flex;
27  align-items: center;
28  padding: 5px;
29  position: absolute;
30  top: 20px;
31  left: 250px;
32}
33
34.c-item__more--button{
35  padding-right: 10px;
36}
37
38

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

回答2件

ベストアンサー

margin プロパティを用いることで、質問者さんの実現したいことが可能だと思います (動作確認用リンク)。

CSS
1.c-item__more--button {
2  margin-left: auto; /* 追加 */
3  padding-right: 10px;
4}

投稿2019/11/17 23:55

s8_chu

総合スコア14731

kkkhiroki

2019/11/17 23:59

こんなにシンプルにできることを知れて良かったです。本当に本当に感謝します。ありがとうございます！

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

下記のようなことでしょうか？

・justify-content: space-betweenを追加しました
・pタグはフレージングコンテンツなのでspanタグにしました

html
1  <li class="p-main__contents__ownerReview--list">
2          <a href="#" class="p-main__contents__ownerReview--listLink">
3            <div class="p-main__contents__ownerReview--list-txt">
4              <div class="ownerReview__item__name">
5                <span>PIRKKA TABLE / Artek</span>
6                <span class="ownerReview__item__name-new">NEW</span>
7                <span class="c-item__more--button"> -></span>
8              </div>
9            </div>
10          </a>
11    </li>

css
1.p-main__contents__ownerReview--list{
2  font-size: 12px;
3  line-height:70px;
4}
5.p-main__contents__ownerReview--list-txt{
6  border-bottom: dotted 4px #DEDEDD;
7  width: 90%;
8  margin-left: 25px;
9}
10
11.ownerReview__item__name{
12  color: black;
13  font-size: 17px;
14  padding-left: 10px;
15  position: relative;
16  display: flex;
17  justify-content: space-between; //追加
18  align-items: center;
19}
20
21.ownerReview__item__name-new{
22  width: 45px;
23  height: 25px;
24  background-color: red;
25  color: white;
26  font-weight: bold;
27 /*  display: flex;
28  align-items: center; */
29  padding: 5px;
30 /*  position: absolute; */
31/*   top: 20px;
32  left: 250px; */
33}
34
35.c-item__more--button{
36  padding-right: 10px;
37}
38}