2 строки CSS макет с произвольным номером элемента - PullRequest
Новая
       41

2 строки CSS макет с произвольным номером элемента

0 голосов
/ 14 апреля 2020

У меня есть следующая HTML структура: 

<ul>
    <li><a>a1</a><p>p1</p></li>
    <li><a>a2</a><p>p2</p></li>
    <li><a>a3</a><p>p3</p></li>
    <!-- ... -->
    <li><a>ax</a><p>px</p></li>
</ul>

К сожалению, я не могу изменить ни порядок, ни структуру.

Моя цель - иметь:

  • все <a> изогнуты в верхнем ряду
  • один или все <p> в строках сильфоны . 
[a1 a2 a3 ... ax]
[      p1       ] // or any p

Это даже достижимо?

  • Я пробовал сетку, но верхний ряд не подходит для сгибания произвольного столбца
  • Я пробовал flexbox, но он не подходит для моей цели в 2 ряда

1 Ответ

2 голосов
/ 14 апреля 2020

Я не уверен, правильно ли я понял ваши вопросы, но это css должно быть близко к тому, что вы просили. Не уверен, как именно вы хотите, чтобы отзывчивое поведение или как именно вы хотели, чтобы поля input появлялись, но, возможно, это отправная точка для вас.

Чтобы показать только один вход, я установил непрозрачность input s на 0 и только последний на 1. Затем я увеличил ширину этой последней до 300% и дал ей отрицательный запас, который также должен быть скорректирован для адаптивного поведения.

Так что это еще не оптимальное решение, но оно может направить вас туда, куда вы хотите go.

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

/*
Some resets for styling purpose
*/
ul,
li, 
input {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
/*
Reset end
*/
ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
li {
  display: flex;
  flex-direction: column;  
}
a {
  display: block;
  width: auto;
}

p {
  opacity: 0;
  height: 0;
}
li:last-child p {
  opacity: 1;
  height: auto;
  width: 300%;
  margin-left: -200%;
}
<ul>
    <li><a>a1</a><p>p1</p></li>
    <li><a>a2</a><p>p2</p></li>
    <li><a>a3</a><p>p3</p></li>
    <!-- ... -->
    <li><a>ax</a><p>px</p></li>
</ul>
...