#html #css
#HTML #css
Вопрос:
Как бы я заставил эти теги A располагаться друг над другом, а не рядом друг с другом.
h1 {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
a {
color: black;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<h1>Unlisted Games</h1>
<a href="Website.com">Capture the Flag</a>
<a href="REEEEEEEEEEE.com">Flappy Bird</a>
<a href="google.net">Snake</a>
Комментарии:
1. Посмотрите на разницу между «блочными элементами» и «встроенными элементами» для html. теги a являются встроенными элементами и поэтому естественным образом выстраиваются вместе. Есть много способов отсортировать это, установив их как блочные элементы, но также и неупорядоченный список (после удаления маркеров).
2. превратите их в блоки с помощью отображения. любое значение подходит (и отличается) до тех пор, пока оно не является встроенным / встроенным-x ; 😉
Ответ №1:
добавить display: block; к тегам
a{
display: block;
}
Комментарии:
1. поскольку они являются братьями и сестрами блочного элемента, перевод отображения на уровень блока кажется наиболее естественным, даже если CSS не имеет ничего общего ни с семантикой, ни с какими-либо эффектами на DOM.CSS касается только стиля, и отображение в порядке 😉
2. Не могли бы вы дать мне одобрение ответа? Заранее спасибо 🙂
Ответ №2:
Если вы можете изменить разметку HTML, чем добавлять <br>
ссылки между ссылками.
Если это должна быть просто задача CSS, я бы сделал
a {float: left; clear: left;}
Если вы добавляете display: block
, когда кто-то вам отвечает, 100% будет активен для клика, это может быть неправильно. Но ссылки будут там, где вы хотите их иметь.
Комментарии:
1. display:grid / flex / table — это также другие блочные элементы с другим поведением 😉 display:table сократит элемент до его содержимого…
2. @G-Cyrillus: конечно, есть миллион способов, как это сделать, зависит от контекста. Но я не знаю, почему вы пишете это мне, попробуйте написать другие варианты в OP 😉
3. Я не думаю, что float — лучший первый выбор (чтобы посоветовать новичку), и у него есть побочные эффекты, с которыми вам, возможно, придется иметь дело позже 😉
Ответ №3:
Вы можете использовать список для отображения вашего .
Это будет выглядеть примерно так :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unlisted Games</title>
<style>
h1{
text-align:center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
a{
color: black;
font-size: 30px;
}
.vertical-align {
display: inline
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="background.js"></script>
<h1>Unlisted Games</h1>
<ul>
<li><a href="Website.com">Capture the Flag</a></li>
<li><a href="REEEEEEEEEEE.com">Flappy Bird</a></li>
<li><a href="google.net">Snake</a></li>
</ul>
</body>
</html>
Комментарии:
1. Вы знаете, что вы могли бы сделать:
a{display:list-item;}
не касаясь HTML, если вы хотите, чтобы ссылки выглядели как список 😉
Ответ №4:
Для быстрого, грязного и простого решения все, что вам нужно сделать, это вставить разрывы строк ( br
) после каждого элемента A:
<h1>Unlisted Games</h1>
<a href="Website.com">Capture the Flag</a><br>
<a href="REEEEEEEEEEE.com">Flappy Bird</a><br>
<a href="google.net">Snake</a><br>
Однако, как было указано в комментариях, стоит отметить, что это не даст вам большого контроля над высотой / интервалом строки, поэтому там, где это желательно, вы должны использовать альтернативные методы, предложенные другими плакатами.
Комментарии:
1. Я бы не стал этого делать, поскольку у вас не будет точного контроля над высотой строки и межстрочным интервалом из-за тегов разрыва.
2. @NathanielFlick Ты прав… В целом я бы сказал, что для какой-то быстрой и грязной вещи это, вероятно, хорошо, но, вероятно, это не идеально, если вам нужен этот элемент управления (я не думал о проблеме межстрочного интервала).). Я скоро отредактирую свой пост с этой целью.
3. просто используйте display, для этого он и создан 😉
Ответ №5:
Вот несколько способов display
завершить другие ответы, это может быть больше
h1 {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
a {
color: black;
font-size: 30px;
background: yellow;
display: table;
}
hr~a {
display: block;
width: max-content;
background: pink;
}
div {
display: flex;
flex-direction: column;
}
div a {
align-self: start;
background: lightblue;
}
div hr ~a {
display:list-item;
background:green;
margin-left:2em;
}
<h1>Unlisted Games</h1>
<code>display:table</code>
<a href="Website.com">Capture the Flag</a>
<a href="REEEEEEEEEEE.com">Flappy Bird</a>
<a href="google.net">Snake</a>
<hr>
<code>display:block</code>
<code>width: max-content;</code>
<a href="Website.com">Capture the Flag</a>
<a href="REEEEEEEEEEE.com">Flappy Bird</a>
<a href="google.net">Snake</a>
<div>
<h1>Unlisted Games</h1>
<p>Inside a <code>display:flex</code> parent set to <code>flex-direction:column</code></p>
<a href="Website.com">Capture the Flag</a>
<a href="REEEEEEEEEEE.com">Flappy Bird</a>
<a href="google.net">Snake</a>
</div>
<hr>
<code>display:list-item</code>
<code>width: max-content;</code>
<a href="Website.com">Capture the Flag</a>
<a href="REEEEEEEEEEE.com">Flappy Bird</a>
<a href="google.net">Snake</a>