ボタンを大きさをきちんと反映して右側に配置したい

Question

前提・実現したいこと

ボタンを作成して右側に配置したい。

ここに質問の内容を詳しく書いてください。

<div class="box2">
     <h2>テキスト</h2>
     <p class="text">
         テキストテキストテキストテキストテキストテキストテキストテキストテキスト
　　　　　　　　　　　　　　　　　　テキストテキストテキストテキストテキストテキストテキストテキストテキスト
　　　　　　　　　　　　　　　　　　テキストテキストテキストテキストテキストテキストテキストテキスト</p>
     <a href="#" class="btn">ボタン</a>
</div>  

.btn {
    background-color: red;
    display: flex;
    justify-content: center;
    width: １００px;
    height: ５０px;
    line-height: ５０px;
    color: #FFF;
    font-size:  10px;
    text-decoration: none;
    border: ３px solid;
    border-radius: 7px;

発生している問題

このコードで作成するとボタンの大きさや高さは反映されるが右側にどうやって寄せていいかわからない。

試したこと

.box2 {
    width: １００px;   
    text-align: right;
}
.btn {
    background-color: red;
    width: １００px;
    height: ５０px;
    line-height: ５０px;
    color: #FFF;
    font-size:  10px;
    text-decoration: none;
    border: ３px solid;
    border-radius: 7px;
}

親要素のdivにtext-aline:right ;を入力したら右側に配置されたが、この場合widthとheightが反映されずボタンの大きさが変わらない。
ボタンの大きさがきちんと反映されるにはどうしたらいいんのでしょうか？

Answer 1

まず、サイズ指定が反映しないのは、a要素はインライン要素だからです。display: block; でブロックレベル要素に変換すればサイズ指定が効くようになります。

次に、レイアウトですが、
現状のHTMLのままで、ボタンだけ右に配置したいのなら、 position: absolute; で絶対配置でしょうか。

.box2 {
  position: relative;
  padding-right: 120px;
}
.btn {
  background-color: red;
  width: 100px;
  height: 50px;
  line-height: 50px;
  color: #FFF;
  font-size: 10px;
  text-decoration: none;
  border: 3px solid;
  border-radius: 7px;
  position: absolute;
  display: block;
  right: 0;
  top: 0;
}

---

HTMLを変更してもいいなら、テキスト要素とボタン要素を別のブロックで囲んで、FlexBoxレイアウトをお勧めします。

<div class="box2">
  <div>
    <h2>テキスト</h2>
    <p class="text">
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div>
    <a href="#" class="btn">ボタン</a>
  </div>
</div> 

.box2 {
  display: flex;
}
.btn {
  background-color: red;
  width: 100px;
  height: 50px;
  line-height: 50px;
  color: #FFF;
  font-size: 10px;
  text-decoration: none;
  border: 3px solid;
  border-radius: 7px;
  display: block;
  flex-shrink: 0;
}

Comments

[pakuchan]

回答ありがとうございました！