Блог

Главная - Вопросы по программированию - как я могу сделать так, чтобы содержимое моего нижнего колонтитула имело разрывы строк между каждой ссылкой

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

#html #css

Вопрос:

Я пытаюсь адаптировать свое веб-приложение и не могу изменить размер страницы, чтобы повлиять на отображение <br> тегов.

 .newline-resize {
    display: none;
}

@media only screen and (max-width: 480px) {
    .newline-resize {
        display: block;
    } 
 <a href="{% url 'IOTD:logout' %}"> Log Out</a>
<br class="newline-resize">
<a href="{% url 'IOTD:myAccount' %}"> My Image</a>
<br class="newline-resize">
<a href="{% url 'IOTD:voteImage' %}"> Vote For An Image</a>
<br class="newline-resize">
<a href="{% url 'IOTD:upload' %}"> Upload An Image</a>
<br class="newline-resize">

Комментарии:

1. есть ли конкретная причина для использования <br> в первую очередь? Вы также можете использовать очереди мультимедиа для изменения привязки в элементе уровня footer a { display: block; } блока, чтобы они отображались друг под другом без использования разрывов строк

Ответ №1:

Это работает

 .newline-resize {
    display: none;
}

@media only screen and (max-width: 800px) {
    .newline-resize {
        display: block;
    } 
 <a href="{% url 'IOTD:logout' %}"> Log Out</a>
<br class="newline-resize">
<a href="{% url 'IOTD:myAccount' %}"> My Image</a>
<br class="newline-resize">
<a href="{% url 'IOTD:voteImage' %}"> Vote For An Image</a>
<br class="newline-resize">
<a href="{% url 'IOTD:upload' %}"> Upload An Image</a>
<br class="newline-resize">

Комментарии:

1. это действительно странно, может ли быть какая-то причина, по которой это не работает с моей стороны, даже если код правильный

Ответ №2:

Добавьте newline-resize класс в свой a тег — не тот <br> .

Ссылка на разрыв MDN

Что вам нужно будет сделать, так это изменить a тег — возможно, добавив поле внизу, — когда ваша точка останова будет достигнута. Должно сработать что-то вроде следующего.

 @media only screen and (max-width: 480px) {
.newline-resize {
    margin-bottom: 1rem; // or whatever you want
}

Ответ №3:

Существует более простое и чистое решение для того, что вы пытаетесь сделать:

якоря установлены по умолчанию inline elements . Вы можете media queries просто настроить таргетинг на все якоря в нижнем колонтитуле и изменить их на элементы уровня блока. Как элементы уровня блока, они будут отображаться друг под другом даже без разрывов линий:

 @media only screen and (max-width: 800px) {
  footer a {
    display: block;
  }
} 
 <footer>
  <a href="{% url 'IOTD:logout' %}"> Log Out</a>
  <a href="{% url 'IOTD:myAccount' %}"> My Image</a>
  <a href="{% url 'IOTD:voteImage' %}"> Vote For An Image</a>
  <a href="{% url 'IOTD:upload' %}"> Upload An Image</a>
</footer>
Метки: ,