как переместить текст влево

Question

Как переместить выделенный текст в левую сторону? Ах, я так устал, пытаясь отрегулировать это и видеть нежелательные результаты. Может ли кто-нибудь помочь, пожалуйста?

HTML

<div mat-dialog-actions class="actionButtons">
  <span  style="white-space: nowrap; padding-left: 0px;">  {{count + ' ' + this['groupType'] | pluralize}} Selected</span>
  <a (click)="clearAll()" href="javascript:void(0);" style="padding-left: 10px;">Clear All</a>
  <button type="button" class="btn-outline btn-outline-primary" (click)="onNoClick()">Cancel</button>
  <button type="button" class="btn-width btn-sm btn-secondary" (click)="confirmModal()" [disabled]="isSaveSelectionDisabled()">Save Selection</button>
  </div>

CSS

.actionButtons {
  float: right;
  padding-right: 20px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
}

Answer 1

Если вы хотите плавать текст влево и удерживать кнопки справа, вам нужно сделать текстовые элементы display:block и плавать их влево.

Вы получите строка состояния шириной 100%, так что вы можете перемещать элементы по всем направлениям.

Я не изменял ни один из существующих HTML (за исключением изменения текста «Выбранный» на статус *). 1015 * значение).

.actionButtons {
  float: right;
  padding-right: 20px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
  
  /** Added */
  width: calc(100% - 20px);
  text-align: right;
}

/** Added */
.actionButtons > span,
.actionButtons > a {
  display: block;
  float: left;
  margin-top: 1.5px; /* heights: button = 21px, text = 18px */
}

<div mat-dialog-actions class="actionButtons">
  <span style="white-space: nowrap; padding-left: 0px;">0 Selected</span>
  <a (click)="clearAll()" href="javascript:void(0);" style="padding-left: 10px;">Clear All</a>
  <button type="button" class="btn-outline btn-outline-primary" (click)="onNoClick()">Cancel</button>
  <button type="button" class="btn-width btn-sm btn-secondary" (click)="confirmModal()" [disabled]="isSaveSelectionDisabled()">Save Selection</button>
</div>

Answer 2

Я просто немного изменил ваш код, вы можете посмотреть на это:

Причина, по которой он не работает для вас, потому что вы заставили все элементы перемещаться right, отмечая float:right. Я сделал только те элементы, которые двигались влево, а все остальное - вправо. надеюсь, это поможет.

теперь вы можете удалить свой код из .actionButtons, в котором он больше не нужен.

.actionButtons {
  border-top: 1px solid black;
}

#btnOutline,
#btnWidth {
  float: right;
}

#moveLeft {
  padding-top:2px;
  float: left;
}

<div mat-dialog-actions class="actionButtons">
  <div id="moveLeft">
    <span style="white-space: nowrap;">  Selected</span>
    <a (click)="clearAll()" href="javascript:void(0);" style="padding-left: 10px;">Clear All</a>
  </div>
  <button id="btnOutline" type="button" class="btn-outline btn-outline-primary" (click)="onNoClick()">Cancel</button>
  <button id="btnWidth" type="button" class="btn-width btn-sm btn-secondary" (click)="confirmModal()" [disabled]="isSaveSelectionDisabled()">Save Selection</button>
</div>

Answer 3

Удалите стиль float, присвоенный actionButtons, и попробуйте это:

.actionButtons * {
  float:right;
}

.actionButtons > span {
  float:left;
}

Answer 4

Вы пробовали выравнивание текста?

.actionButtons {
  float: right;
  padding-right: 20px;
  background: white;
  position: sticky;
  top: 0;
  text-align: left; /* You may want this? */
  z-index: 100;
}