按鈕未對齊

無論文本長度如何，我都試圖將 [ ] 圖示向右推，但我無法做到。

我試著做 'text-align: right; 和 justify-content-right' 也是 'float:right' 但它不起作用。

下面是所需部分的影像以及 html 和 css。我應該如何讓它正確對齊？謝謝！！

這是 Html

<div class="container  h-100 d-flex justify-content-center align-items-center ">
 <div class="info_box">
     <div class="info_title">
       <span>Some Rules of this Quiz</span>
     </div>
   <!--Questions-->

   <!--single questions-->
<article class="question">
<div class="question-title d-flex">
<p>Is it Multiple Choice?</p>
<button type="button" class="question-btn justify-content-right">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>  
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<!--question text -->
<div class="question-text">
<p>
No, There is only one correct answer per question. Once selected you cannot reselect 
</p>
</div>
</article>

 <div class="info_buttons">
      <button class="restart">Continue to Quiz</button>
      <button class="quit">Exit Quiz</button>
</div>
</div>
</div>

css

.info_box{
    width:540px;
    padding: 15px;;
    background: var(--clr-white);
    border-radius: 5px;;
}

.info_title{
    padding: 5px;
    border-bottom: 1px solid black;
    color:var(--clr-steelBlue);
    margin-bottom: 10px;
    text-align: center;
}
.question{
   border: 2px solid red;
}
 .question-text p {
    margin-bottom: 0;
  }
.question-title p {
    margin-bottom: 0;
    letter-spacing: var(--spacing);
    color: var(--clr-grey);
  }
  .question-btn {
    font-size: 1.5rem;
    background: transparent;
    border-color: transparent;
    cursor: pointer;
    color: var(--clr-steelBlue);
    transition: var(--transition);
  }

  .question-btn:hover {
    transform: rotate(90deg);
  }

  .question-text p{
      color: var(--clr-grey-6);
  }

  /*Hide Text*/
  .question-text{
    display: none;
  }

  .show-text .question-text{
      display:block;
  }
  .minus-icon{
      display: none;
  }

  .show-text .minus-icon{
      display: block;
  }

  .show-text .plus-icon{
      display: none;
  }

  .info_buttons {
      float: right;
      padding: 5px;
      margin-top: 5px;
  }

uj5u.com熱心網友回復：

看看這個，似乎如果你將justify-content-between類添加到.question-title元素應該得到你所需要的。我建議您也將flex-shrink-0（或等效的類）添加到按鈕以防止它縮小（但文本會）。

其他一些提示

• 從一開始就知道您使用的是 Bootstrap 或其他一些框架可能會有所幫助，因為如果沒有其他類存在，您發布的代碼片段就無法真正作業。
• 某些 CSS 中有雙分號。你應該考慮洗掉它。

uj5u.com熱心網友回復：

這也可能有效

引導程式 4

<span class="minus-icon float-right">
<i class="far fa-minus-square"></i>
</span>

引導程式 5

<span class="minus-icon float-end">
<i class="far fa-minus-square"></i>
</span>

或者甚至直接在圖示類中嘗試浮動右側或浮動結束。

uj5u.com熱心網友回復：

我主要使用空間之間。

.container {
  padding: 0.5rem;
}
.container .item {
  padding: 0.25rem;
  border: 1px solid lightblue;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .item .action-btn {
  font-weight: bold;
  margin: 0 0.25rem;
  cursor: pointer;
}

<div class="container">
  <div class="item">
    <span>My text goes here</span>
    <span class="action-btn"> </span>
  </div>
    <div class="item">
    <span>My text goes here, yet more text</span>
    <span class="action-btn"> </span>
  </div>
</div>

uj5u.com熱心網友回復：

您需要添加兩個 CSS。

.question-title{
    display:flex;
  }
.question-title p {
    width:100%;
  }

uj5u.com熱心網友回復：

您可以使用 flex-boxes 之類的 Blow：

.question-title{
    display: flex;
    justify-content: space-between;
 }

注意：最好為按鈕提供另一個 div，而不是將按鈕設為標題的子項。

或者，您可以使用相對定位按鈕

.question-button{
   position: relative;
   right: 0.5rem;
 }

標籤：html css bootstrap-4

上一篇：我的導航欄內容彼此合并

下一篇：如何在單擊時更改img大小，并在使用javascript切換時將其恢復正常？