Блог

Главная - Вопросы по программированию - Укладка тегов в HTML и CSS

Укладка тегов в HTML и CSS

#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>

Метки: