Создание вертикального заголовка горизонтального

-2

Я пытаюсь сделать следующий горизонтальный вдоль страницы, а не вертикальный. Я хотел бы сделать это, поскольку он предназначен для заголовка в верхней части сайта. Благодарю.Создание вертикального заголовка горизонтального

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #f1f1f1; 
 
} 
 
     
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 
     
 
/* Change the link color on hover */ 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

источник

2016-11-14 Giacomo Lawrance

Вы еще не запустили '

', но у вас есть конечный тег! –

Нет ''! –

Downvote для кодирования ошибок. Нет закрывающего тега, такого как –

Проблемы с вами код:

<header> элемент неправильно, должен быть <head>.
Нет <html> тег.
</header> осиротевший.
Нет никаких конечных тегов для </body> и </head>.

Просто сделать две вещи:

Снимите width для <ul>.
Добавить display: inline-block для <li>.

Код:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     background-color: #f1f1f1; 
     } 

     ul li { 
     display: inline-block; 
     } 

     li a { 
     display: block; 
     color: #000; 
     padding: 8px 16px; 
     text-decoration: none; 
     } 

     /* Change the link color on hover */ 
     li a:hover { 
     background-color: #555; 
     color: white; 
     } 
    </style> 
    </head> 
    <body> 

    <ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
    </ul> 
    </body> 
</html>

источник

2016-11-14 14:19:51

Удивительный, спасибо! Добавлено, похоже, хорошо работает. Спасибо за большую помощь! –

попытка ниже CSS собственности для li

float: left;

источник

2016-11-14 14:18:46

Ваш код имеет несколько ошибок: Посмотрите на это:

<!DOCTYPE html> 
    <html> 

    <head> 
     <style> 
      ul { 
       list-style-type: none; 
       margin: 0; 
       padding: 0; 
    /*   width: 200px;*/ 
       background-color: #f1f1f1; 
      } 
      li {display: inline-block} 
      li a { 
       display: block; 
       color: #000; 
       padding: 8px 16px; 
       text-decoration: none; 
      } 
      /* Change the link color on hover */ 

      li a:hover { 
       background-color: #555; 
       color: white; 
      } 
     </style> 
    </head> 

    <body> 

     <ul> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#news">News</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li><a href="#about">About</a></li> 
     </ul> 
    </body> 

    </html>

источник

2016-11-14 14:20:05 DaFois

добавить с display:inline-block его шоу, как горизонтальная и width будет автоматически его шоу, как журнал. если вы не нуждаетесь в ширину изменения в px`

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width:auto; 
 
    background-color: #f1f1f1; 
 
    
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 

 
} 
 
li{display:inline-block;} 
 

 
/* Change the link color on hover */ 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

источник

2016-11-14 14:21:16 prasanth

Вы должны поставить «дисплей: встроенный блок» для литий.

<style> 
ul li{ 
    display:inline-block; 
    width: 20%; /* put width as per your requirement*/ 
} 
</style>

источник

2016-11-14 14:22:33 Taniya

Создание вертикального заголовка горизонтального

ответ

Смежные вопросы