Блог

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

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

#html #css

#HTML #css

Вопрос:

Здравствуйте, я не могу найти решения в Google.

затем «Номер телефона» переходит на следующую строку. нравится этот

«Зарегистрироваться» «Главная» «Контакт, номер телефона => переместить следующую строку»

Мой вопрос в том, как выровнять контакт, номер телефона в одной строке в виде списка меню. Спасибо

 .nav-li {
  display: block;
  padding: 20px 30px;
}  
 <ul class="nav-links">
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Sign up</a>
  </li>
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Home</a>
  </li>
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Contact, Phone number</a>
  </li>
</ul>

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

1. Добавить разрыв => <a href="#">Contact,<br> Phone number</a>

2. извините, мой вопрос заключался в том, как не перемещать следующую строку. Просто в одном списке меню, таком как «Контакт, номер телефона». Он автоматически перемещается на следующую строку, когда я вижу в браузере.

3. @Bilguun Enkhee Вы можете использовать border-bottom: 1px solid #00f; и сделать оформление текста: нет для ссылок.

4. @BilguunEnkhee Я думаю, ваш вопрос не ясен. Не могли бы вы приложить скриншот вашего результата и желаемого результата?

Ответ №1:

https://jsfiddle.net/0bc7azed/3/

либо используйте <p> , либо

 <br>

код

   <ul class="nav-links" >
             <li class="nav-li">
                 <!-- svelte-ignore a11y-invalid-attribute -->
                 <a href="#">Sign up</a>
             </li>
             <li class="nav-li">
                   <!-- svelte-ignore a11y-invalid-attribute -->
                 <a href="#">Home</a>
             </li>
             <li class="nav-li">
                   <!-- svelte-ignore a11y-invalid-attribute -->
                 <a href="#">Contact,<br>Phone number</a>
             </li>
         </ul>

Ответ №2:

Я надеюсь, это может вам помочь.

 .nav-li{
  display: block;
  padding: 20px 30px;

}
.nav-li a {
  text-decoration: none;
  border-bottom: 1px solid #00f;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <ul class="nav-links" >
             <li class="nav-li">
                 <!-- svelte-ignore a11y-invalid-attribute -->
                 <a href="#">Sign up</a>
             </li>
             <li class="nav-li">
                   <!-- svelte-ignore a11y-invalid-attribute -->
                 <a href="#">Home</a>
             </li>
             <li class="nav-li">
                   <!-- svelte-ignore a11y-invalid-attribute -->
                 <a href="#">Contact, Phone number</a>
             </li>
         </ul>
</body>
</html>

Ответ №3:

Вы можете использовать тег span в теге и задать для атрибута span значение display: block. Если вы используете br, настроить его будет сложнее

   .nav-li {
      display: block;
      padding: 20px 30px;
    }

  .nav-li span {
    display: block;
  }  
     <ul class="nav-links">
      <li class="nav-li">
        <!-- svelte-ignore a11y-invalid-attribute -->
        <a href="#">Sign up</a>
      </li>
      <li class="nav-li">
        <!-- svelte-ignore a11y-invalid-attribute -->
        <a href="#">Home</a>
      </li>
      <li class="nav-li">
        <!-- svelte-ignore a11y-invalid-attribute -->
        <a href="#">
          <span>Contact</span>
          <span>Phone number</span>
        </a>
      </li>
    </ul>

Ответ №4:

Вы можете использовать <br> тег для разрыва строки. Вы также можете проверить ответ от @FiveFour_Xone

 .nav-li {
  display: block;
  padding: 20px 30px;
}  
 <ul class="nav-links">
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Sign up</a>
  </li>
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Home</a>
  </li>
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Contact, <br />Phone number</a>
  </li>
</ul>