Поля препятствуют выравниванию текста;

#html #css #margin #text-align

#HTML #css #Поля #Выравнивание текста

Вопрос:

(Если есть более простое решение этой проблемы, пожалуйста, скажите мне)

Я хочу, чтобы на этом веб-сайте было 2 раздела текста, по одному с каждой стороны экрана.

Я сделал это успешно. Я использовал выравнивание текста и translate3d для перемещения текста вправо, затем вверх.

Единственная проблема заключалась в том, что ширина текста справа блокировала взаимодействие с текстом слева.

Я решил изменить ширину текста с правой стороны, и когда я это сделал, выравнивание текста не работало из-за полей (проверка указанных полей).

Я решил изменить поля на 0, и ничего не произошло.

Я понятия не имею, почему, но вот некоторый код:

 .mid{
  margin: 0px 0px 0px 0px;
  font-family:myfont;
  font-size:150px;
}

.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}

 </div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>

Позже я добавил это, но все равно ничего не произошло:

 #calculator{
margin: 0 !important;
}

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

Или есть способ ПОЛНОСТЬЮ удалить поля?

Ответ №1:

 .mid {
  margin: 0;
  font-family: myfont;
  font-size: 50px;
  float: left;
  width: 50%;
}
.mid:nth-child(even) {
  text-align: right;
}

 <div id="midwlink">
  <p id="games" class="mid">Games</p>
  <p id="calculators" class="mid">Calculators</p>
  <p id="animations" class="mid">Animations</p>
  <p id="pictures" class="mid">Pictures</p>
</div>

Развернуть фрагмент

1. float сработал! в чем разница между float и text align?

2. Плавающие поля @ZaneClark позиционируют <p> элемент, ширина которого составляет 50%, слева и справа. text-align выравнивает внутренний текст <p> справа (пример: если средняя ссылка равна 300 пикселей, каждая p будет равна 150 пикселям. Внутренний текст будет (слева / по центру / справа) выровнен в пределах 150 пикселей.

3. это имеет смысл 🙂 Спасибо!

Ответ №2:

Существует много способов создания параллельных макетов в HTML. Один из самых простых — использовать два divs бок о бок, как в этом фрагменте.

 div {
  width: 49%;
  display: inline-block;
}
div.right {
  text-align: right
}

 <div class="left">
  Hello left
</div>
<div class="right">
  Hello right
</div>

Развернуть фрагмент

Ответ №3:

Может ли это быть неправильный <div> тег в начале? Вы начали с закрывающего тега div.

Если вы это исправите, то получите то, что хотите.

 .mid{
  margin: 0px 0px 0px 0px;
  font-family:myfont;
  font-size:50px;
}

.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}

 <div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>

Развернуть фрагмент

1. О, извините за это. Можете ли вы взглянуть на фрагмент и сказать мне, это то, что вы хотите? Спасибо.

2. Я уже нашел правильную вещь: используйте float вместо align .

3. Хорошо. Это здорово.