Есть следующий вопрос,как отразить список по горизонтали? - HTML и CSS

SwatXX · 02.02.2020, 18:16

Есть ненумерованный список,нужно сделать так , чтобы один список был над другим и оба были отражены по горизонтали.
ВАЖНО

Код:

display:inline;Не работает,не отражается список и всё тут

Пробовал flex-ом , но тут появляются ненужные отступы, padding,margin(при использовании flex-а)никакой реакции,как быть мужики?

Arigato · 02.02.2020, 19:00

Для начала привести код, в котором возникает проблема.

SwatXX · 02.02.2020, 19:02

Arigato,
HTML

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blitz</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
    <div class="container">
        <div class="logo">Blitz</div>
        <ul class="menu">
            <li>Home</li>
            <li>About</li>
            <li>Projects</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>  
       <ul class="top-menu">
            <li>Home age</li>
            <li>Who are we?</li>
            <li>My portfolio</li>
            <li>Latest News</li>
            <li>Get in touch</li>
        </ul>
        </div>
    
    </header>
    <menu></menu>
    <article></article>
    <footer></footer>
</body>
</html>

CSS

Код:

*{
 list-style:none;
  outline: 0; 
  magin: 0 ;

}
body{
	background-color: #fefefe;
}
.container{
position: absolute;
	width: 960;
	height: 142;
	padding-left: :220px;
}

.logo{
	font-size: 42px;
	font-family:'Pacifico Regular',sans serif;
}
.menu{
	font-size:12px;
	font-family: 'Bebas Regular' , sans serif;
	display:flex;
	justify-content: space-around;
		padding-right:200px;
}	
.top-menu{
	padding-right:20px;
	font-size:12px;
	font-family: 'Bebas Regular' , sans serif;
	opacity:30%;
	display:flex;
	justify-content: space-around;
	padding-right:200px;
}

Arigato · 02.02.2020, 23:26

Не понял, а чем

Код:

.menu li, .top-menu li {display: inline}

не устраивает?

SwatXX · 03.02.2020, 16:21

Arigato, Я же уже указал , что

Код:

display:inline;

Игнорируется по неизвестным мне причинам,я не знаю , почему так

Arigato · 03.02.2020, 19:20

Так у меня все работает. Список выводится в строку.

02.02.2020, 18:16	#1
SwatXX Новичок Джуниор Регистрация: 02.02.2020 Сообщений: 3	Есть следующий вопрос,как отразить список по горизонтали? Есть ненумерованный список,нужно сделать так , чтобы один список был над другим и оба были отражены по горизонтали. ВАЖНО Код: `display:inline;Не работает,не отражается список и всё тут` Пробовал flex-ом , но тут появляются ненужные отступы, padding,margin(при использовании flex-а)никакой реакции,как быть мужики?

02.02.2020, 19:00	#2
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,836	Для начала привести код, в котором возникает проблема. E-Mail: arigato.freelance@gmail.com

02.02.2020, 23:26	#4
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,836	Не понял, а чем Код: `.menu li, .top-menu li {display: inline}` не устраивает? E-Mail: arigato.freelance@gmail.com

03.02.2020, 16:21	#5
SwatXX Новичок Джуниор Регистрация: 02.02.2020 Сообщений: 3	Arigato, Я же уже указал , что Код: `display:inline;` *Игнорируется* по неизвестным мне причинам,я не знаю , почему так

03.02.2020, 19:20	#6
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,836	Так у меня все работает. Список выводится в строку. E-Mail: arigato.freelance@gmail.com

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Не добавляется следующий элемент в список	amastudent	Общие вопросы C/C++	1	17.10.2017 23:17
Список. Есть ли такой компонент?	ArrowSoft	Компоненты Delphi	2	27.11.2015 09:00
Следующий Студенческий вопрос. Коллекции, целесообразности их использования, перегрузки.	pinkiller	C# (си шарп)	3	26.05.2012 18:24
css список-есть проблема	Casta	HTML и CSS	0	25.05.2011 09:50
Определить есть ли на листе выпадающий список	DimsL	Microsoft Office Excel	10	24.12.2010 19:18