Горизонтальный Nav в HTML5

Question

Должен сказать, что я новичок в Stack Overflow и HTML5. Мой основной язык не английский. Изучение чего-то на другом языке, отличного от языка родного языка, очень сложно, и я не нашел никакой HTML-помощи, кроме оснований, таких как «что такое глава, как использовать абзацы», поэтому мне пришлось установить код, который я нашел на интернет. Мне пришлось немного помочь с этим.

Моя проблема заключается в том, что мне нужно преобразовать это вертикальное меню ниже в горизонтальное.

---

Вот код для меню:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: #333; 
 
} 
 
ul { 
 
    background: white; 
 
    border-top: 6px solid hsl(180, 40%, 60%); 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    font-size: 0; 
 
} 
 
ul li { 
 
    list-style-type: none; 
 
    position: relative; 
 
    overflow: hidden; 
 
    font-size: inherit; 
 
    float: left; 
 
} 
 
ul li a { 
 
    font: normal 14px/28px Ubuntu; 
 
    color: hsl(180, 40%, 40%); 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    user-select: none; 
 
    position: relative; 
 
} 
 
.ink { 
 
    display: block; 
 
    position: absolute; 
 
    background: hsl(180, 40%, 80%); 
 
    border-radius: 100%; 
 
    transform: scale(0); 
 
} 
 
.ink.animate { 
 
    animation: ripple 0.65s linear; 
 
} 
 
@keyframes ripple { 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(2.5); 
 
    } 
 
}

<ul> 
 
    <li><a>23432222</a></li> 
 
    <li><a>444444</a></li> 
 
    <li><a>Sample Text</a></li> 
 
    <li><a>342123443</a></li> 
 
</ul>

Я был бы благодарен за любую помощь, и извините за размещение своего рода глупые вопросы, я просто не знал, где найти ответ для этого.

Answer 1

Ниже приведена горизонтальная версия меню. Главное, что я сделал, это изменить display на ul и li на inline-block. Это делает так, что они выстраиваются рядом друг с другом, а не друг над другом. Затем я удалил width: 200px с ul (который вызывал обертывание элементов li) и установил text-align: center на корпусе, чтобы получить центр ul.

Рабочая Демо:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: #333; 
 
    text-align: center; 
 
} 
 
ul { 
 
    display: inline-block; 
 
    background: white; 
 
    border-top: 6px solid hsl(180, 40%, 60%); 
 
    margin: 0 auto; 
 
    font-size: 0; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    font-size: inherit; 
 
} 
 
ul li a { 
 
    font: normal 14px/28px Ubuntu; 
 
    color: hsl(180, 40%, 40%); 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    user-select: none; 
 
    position: relative; 
 
} 
 
.ink { 
 
    display: block; 
 
    position: absolute; 
 
    background: hsl(180, 40%, 80%); 
 
    border-radius: 100%; 
 
    transform: scale(0); 
 
} 
 
.ink.animate { 
 
    animation: ripple 0.65s linear; 
 
} 
 
@keyframes ripple { 
 
    100% { 
 
     opacity: 0; 
 
     transform: scale(2.5); 
 
    } 
 
}

<ul> 
 
    <li><a>23432222</a> 
 
    </li> 
 
    <li><a>444444</a> 
 
    </li> 
 
    <li><a>Sample Text</a> 
 
    </li> 
 
    <li><a>342123443</a> 
 
    </li> 
 
</ul>

JSFiddle Версия: https://jsfiddle.net/wd51zgog/

Answer 2

Один простой способ сделать все ссылки в линию (по горизонтали), чтобы использовать CSS атрибут display: inline block;

nav li { 
display: inline-block; 
} 

Навигационный для СЧА тегов, которые используются для навигации:

<nav> 
    <ul> 
     <li><a>23432222</a></li> 
     <li><a>444444</a></li> 
     <li><a>Sample Text</a></li> 
     <li><a>342123443</a></li> 
    </ul> 
    </nav>