text-alignend沒有把我的按鈕放在右邊

我正在嘗試在我的對話框頁面中創建一個視窗欄，其中有一個顏色背景，左側的文本和右側的按鈕，允許用戶單擊它以關閉對話框視窗。出于某種原因，我無法讓按鈕顯示在右側。我嘗試了 text-align right 或 end 但由于某種原因它不起作用。不知道我在這里缺少什么

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
  text-align: end;
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

<div class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <button type="button" class="xbutton text-white">X</button>
</div>

我還包括了具有示例的 codepen

https://codepen.io/NoSoup4You2/pen/ZEavYeY

uj5u.com熱心網友回復：

嘗試使用

`  display: flex;
  justify-content: space-between;`

在你的.ds-primary-班級里面。請應用下面的代碼，您就可以開始了。HTML：

`<div class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <button type="button" class="xbutton text-white">X</button>
</div>`

CSS：

  .ds-primary-bg {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
  text-align: end;
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

這是codePen鏈接

uj5u.com熱心網友回復：

對齊專案可以在 CSS 中通過多種方式完成

• 使用彈性盒
• 制作按鈕顯示塊并設定margin-left

使用 flexbox 的第一個選項

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
  
}
.text-white {
  color: white;
}
.flex-button{
  display:flex;
  justify-content: flex-end;

}
.xbutton {
  background-color: #09f;
  border: 0ch;

}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

<div class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <div class="flex-button">
  <button type="button" class="xbutton text-white">X</button>
    </div>

</div>

第二個選項使按鈕顯示為塊并發送右側

將元素顯示為塊元素（如按鈕）。它從新行開始并占據整個寬度

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
  display: block;
  margin-left: auto;
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

<div class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <button type="button" class="xbutton text-white">X</button>
</div>

uj5u.com熱心網友回復：

作為一個按鈕行內元素，它占據了它的內容寬度。如果你用 container(div) 包裹按鈕，那么它會占據整個寬度，那么你可以將該按鈕移動到右側。

更新代碼：

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
 
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

.button-container{
  text-align:right;
}

<div class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <div class="button-container">
  <button type="button" class="xbutton text-white">X</button>
  </div>
</div>

uj5u.com熱心網友回復：

您也可以嘗試使用此方法。更改為 html，只需將按鈕移動到文本之前。

<div class="ds-primary-bg">
    <button type="button" class="xbutton text-white">X</button>
    <h3 class="tooltext">Menu Item Edit</h3>
</div>

以及對 CSS 的更改

.xbutton {
   position: absolute;
   background-color: #09f;
   border: 0ch;
   padding-top: 2%;
   text-align: end;
 }

uj5u.com熱心網友回復：

您可以在您想要基本父級的任何地方更改位置按鈕。

* {
  margin: 0;
  box-sizing: border-box;
}
body {
  padding: 0;
}
.ds-primary-bg {
  position: relative;
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #09f;
  border: 0;
}

.tooltext {
  color: white;
  padding-left: 25px;
}

    <div class="ds-primary-bg">
      <h3 class="tooltext">Menu Item Edit</h3>
      <button type="button" class="xbutton text-white">X</button>
    </div>

uj5u.com熱心網友回復：

這不是文本，這就是為什么在您嘗試對齊它時它不起作用的原因。

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
  display: block;
  margin-left: auto;
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

<div class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <button type="button" class="xbutton text-white">X</button>
</div>

標籤：html css

上一篇：將mat-dialog-container填充設定為0后獲取滾動條

下一篇：填充第一列后如何將文本移動到第二列？