Как я могу изменить текст, помеченный справа?

Question

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

label {
  display: block;
  text-align: right;
  margin-right: 1em;
}

<link async="" rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

<div class="pretty p-icon p-curve p-jelly">
  <input type="checkbox">
  <div class="state p-danger">
    <i class="icon mdi mdi-skull">   </i>

    <label style="text-align: right;">hi</label>

  </div>
</div>

Answer 1

Джон с двумя строками кода, вы можете сделать это. Смотрите изменения, которые я сделал. В HTML я помещаю все в раздел или div, если хотите, с содержанием имени класса. В CSS я написал две строки кода, чтобы изменить это. Для этих вещей хорошо использовать Flexbox. очень легко и меньше кода. Проверьте ниже.

.content{
  display:flex;
  justify-content:flex-end;
}

<link async="" rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

<section class='content'>
  <div class=" pretty p-icon p-curve p-jelly">
  
  <input type="checkbox">
  <div class="state p-danger">
    <i class="icon mdi mdi-skull"></i>
    <label style="text-align: right;">hi</label>
  </div>
  
</div>
</section> 

Надеюсь, это было полезно для вас.

Answer 2

Присвойте идентификатор div как chbox

<div class="pretty p-icon p-curve p-jelly" id="chbox">

и добавьте следующие свойства к этому идентификатору в css

#chbox {
  display: block;
    float:right;
  text-align: right;
  margin-right: 1em;
}

Таким образом, код будет:

#chbox {
  display: block;
  float: right;
  text-align: right;
  margin-right: 1em;
}

<link async="" rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

<div class="pretty p-icon p-curve p-jelly" id="chbox">
  <input type="checkbox">
  <div class="state p-danger">
    <i class="icon mdi mdi-skull">   </i>

    <label style="text-align: right;">hi</label>

  </div>
</div>

Answer 3

Попробуй с плавающей точкой

div.pretty {
  text-align: right;
  margin-right: 1em;
  float: right;
}

<link async="" rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
<div class="pretty p-icon p-curve p-jelly">
    <input type="checkbox" id="chk">
  <div class="state p-danger">
    <i class="icon mdi mdi-skull">   </i>
    <label for="chk" style="text-align: right;">hi</label>
  </div>
</div>