Выровняйте элементы списка по горизонтали в адаптивном дизайне - PullRequest
Новая
       52

Выровняйте элементы списка по горизонтали в адаптивном дизайне

0 голосов
/ 05 ноября 2019

См. JSFiddle .

Это адаптивный дизайн с параметрами "vw" в коде. Я хочу, чтобы Text_1 , Text_2 и Text_3 были выровнены по горизонтали, что означает, что когда я изменяю размер окна браузера, расстояние от левой стороны экрана доначало текста одинаково для этих 3 слов. С помощью кода current я выравниваю их (через свойство margin), но как только размер окна браузера изменяется, Text_2 и Text_3 перемещаются относительно Text_1 (вправо, когда размер окна уменьшается, влевокогда оно увеличивается). Что не так в коде, пожалуйста? 

<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
  <li><span class="example">Text_2</span></li>
  <li><span class="example_translated">Text_3</span></li>     
</ul>
</ol>
</div>

.meanings_and_examples {
display: flex;
flex-direction: column;
}

.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}

ol.circle {
list-style-type: none;
}

li {
line-height: calc(1.1em + 1.5vw);
}

ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 1.3em;
}

ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.2em + 1.5vw);
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin: 0% 3.5% 0% -2.4em;
}

ul {
list-style-type: none;
}

.example {
width: auto;
text-align: left;
font-weight: 400;
}

.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}

Ответы [ 2 ]

0 голосов
/ 05 ноября 2019

Хорошо, у вас много чего происходит, для вашего следующего вопроса я бы отбросил скрипку любого кода, который не нужен для примера, все стили и тому подобное. Затем вы используете слишком много динамической ширины вместе, и, как сказал Paulie_D, вам не разрешается помещать в тег ul или ol * 1006 что-либо, кроме тегов li *1004*. *-тег.

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

Iсохранил ваш HTML и изменил немного CSS, чтобы он работал так, как вы хотите, но вам действительно стоит подумать о новой настройке HTML. 

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  width: auto;
  text-align: left;
  color: #1f2c60;
  font-weight: 700;
  word-wrap: break-word;
  text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
  margin-right: 1%;
  font-size: calc(0.5em + 2.3vw);
}

ol.circle {
  list-style-type: none;
  border: 2px solid purple;
  position: relative;
  padding-left: 10vw;
}

li {
  line-height: calc(1.1em + 1.5vw);
 
}

ol.circle > li {
  counter-increment: item;
  margin: 0% 0% 0.2% 0;
  border: 2px solid orange;
  padding: 0;
  position: relative;
 }

ol.circle > li::before {
  content: counter(item);
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  position: absolute;
  background: #1f2c60;
  color: white;
  box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
  width: calc(1.2em + 1.5vw);
  transform: translateX(-100%);
 }

ul {
  list-style-type: none;
  padding-left: 0;
  border: 2px solid red;
}

.example {
  width: auto;
  text-align: left;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  font-weight: 400;
  color: #5d78e5;
}
<div class="meaning">
<ol class="circle">
  <li>Text_1</li>
   <ul>
      <li><span class="example">Text_2</span></li>
      <li><span class="example_translated">Text_3</span></li>     
   </ul>
</ol>
</div>

См. Мою модифицированную скрипку для запрашиваемого вами поведения.

0 голосов
/ 05 ноября 2019

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

Тогда есть несколько проблем с вашими полями: у вашего контера width: calc(1.2em + 1.5vw);, но у вас поля margin: 0% 3.5% 0% -2.4em;.

Я предполагаю, что это достигается с помощью различных значений.

Но ваша ведьма-соратник width: calc(1.2em + 1.5vw); выталкивает первый элемент из списка.

Таким образом, поле должно учитывать это, если вы хотите, чтобы элементы списка были выровнены. Таким образом, ваш счетчик должен иметь поля примерно как margin: 0% 3.5% 0% calc(-3.5% - 1.2em - 1.5vw);

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

Но я должен спросить: вам действительно нужен один и один или вы просто используете их, чтобы добавить их до того, какэлементы счетчик? Потому что может быть лучше просто использовать класс (для счетчика) и использовать список сиглов для всех элементов.

...