Неупорядоченный список HTML с количеством столбцов> 1
У меня есть немного HTML с неупорядоченным списком внутри div с column-count = 2 и column-gap = 1em, например:
CSS:
.bestiary-sheet #nb-spells {
column-count: 2;
column-gap: 1em;
}
HTML:
<div id = "nb-spells">
<ul>
<li>Aura-12</li>
<li>Detect Magic-12</li>
<li>Light-12</li>
<!-- other entries omitted -->
</ul>
</div>
При отображении второй столбец начинается на несколько пикселей выше остальных, как показано на этом изображении:
Как я могу убедиться, что второй столбец начинается на одном уровне с первым?
Предоставьте код, который повторяет проблему, потому что на данный момент не. Еще лучше предоставить минимальный воспроизводимый пример
Не могу воспроизвести вашу проблему
Ответы 2
@beergeek Просто установите для верхняя граница значение нуль для UL, это решит вашу проблему, например:
.bestiary-sheet #nb-spells {
column-count: 2;
column-gap: 1em;
}
.bestiary-sheet #nb-spells ul {
margin-top: 0px !important;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
</head>
<body>
<div class = "bestiary-sheet">
<div id = "nb-spells">
<ul>
<li>Aura-12</li>
<li>Detect Magic-12</li>
<li>Light-12</li>
<li>Light-1332</li>
<li>Aura-12</li>
<li>Detect Magic-12</li>
<li>Light-12</li>
<li>Light-1332</li>
<li>Aura-12</li>
<li>Detect Magic-12</li>
<li>Light-12</li>
<li>Light-1332</li>
<li>Aura-12</li>
<li>Detect Magic-12</li>
<li>Light-12</li>
<li>Light-1332</li>
</ul>
</div>
</div>
</body>
</html>
Не рекомендую использовать !important . Его следует использовать только в крайнем случае и с осторожностью крайний.
@JonP, так как я не знаю, что такое предыдущие правила стиля были установлены для этого UL, я использовал это для убедитесь, что маржа удалена.
С конфликтами стилей нужно бороться правильно, используя более конкретные селекторы, а не !important кувалду. Работайте с тем, что нам дано, а не с гипотетическим воображаемым кодом. Вы потенциально поощряете нового программиста использовать !important, который является плохая практика
Я не поощряю нового программиста, как вы имеете в виду веб-разработчика, я просто хотел сказать ему, где ему нужно измениться, и показать ему результат, с его стороны, ему нужно провести некоторые исследования и тому подобное, главное для меня это РАССКАЗАТЬ и ПОКАЗАТЬ, где смотреть. Можете ли вы попытаться понять это, пожалуйста, если это не сложно
Кроме того, можете ли вы сказать мне, где что-то идет не так, когда я говорю, что именно следует удалить его поля? Можете ли вы опубликовать ошибку из-за моего важного, которое я использовал для одного единственного UL? Можете ли вы опубликовать это с некоторым UL, попробуйте добавить 5 UL и опубликуйте ответ, пожалуйста.
Расслабьтесь, удаление маржи — вполне допустимое решение. Использование !important — нет. Это необходимо с кодом, как указано. Я просто указываю на то, что использование !important является плохой практикой и должно использоваться только в крайнем случае, а не в первую очередь. "Можете ли вы попытаться понять это, пожалуйста, если это не сложно"
@JonP спасибо за объяснение, но, как я уже сказал, мы не знаем, какой стиль он использует и где перезаписывается. Но мы можем сказать, используя идентификатор для этого DIV, он ДОЛЖЕН быть только ОДИН, и тогда вы можете безопасно это сделать, если это был класс, это решение было нехорошим, потому что вы широко используются, и все они будут перезаписаны. Еще раз спасибо, надеюсь, вы не чувствуете себя плохо по этому поводу, плюс мы оба на одной стороне.
Разделите список на столбцы, а не на родительский.
#nb-spells ul {
column-count: 2;
column-gap: 1em;
}<div id = "nb-spells">
<ul>
<li>Aura-12</li>
<li>Detect Magic-12</li>
<li>Light-12</li>
<!-- other entries omitted -->
</ul>
</div>
У вас есть отступы в классе .bestiary-sheet?