Как выровнять изображение логотипа и пункты меню в одну строку, не используя абсолютную позицию? - PullRequest
Новая
       0

Как выровнять изображение логотипа и пункты меню в одну строку, не используя абсолютную позицию?

0 голосов
/ 18 января 2019

Фон: Текущий дизайн, над которым я работаю, требует логотип, а затем меню в одной строке.Я хочу, чтобы логотип и меню (состоящие из двух частей, состоящих из двух неупорядоченных списков) отображались в одной строке или в одном разделе.

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

Возникла проблема: Я пытаюсь добавить изображение логотипа и меню в один элемент div, чтобы объединить их в одну строку.Но изображение появляется сверху и сопровождается элементом меню.Я попытался использовать дисплей: встроенный, чтобы вывести изображение логотипа с одной стороны, и меню, начинающееся после изображения логотипа, но это не сработало. Я делюсь своим кодомМожно ли расположить и выровнять изображение вместе с пунктами меню без использования абсолютного положения?В коде есть только HTML5 и CSS3.Там нет JavaScript в коде.

.header{
	position:relative;
	margin:0;
	padding:0;
}


.top{
	height:20%;
	border:1px solid #000;
}

.logo{
	height:100%;
	display:inline;
}
.element{
	clear:both;
	border:1px solid #000;
	float:left;
}
.leftc{
	display:inline;
}
.leftc li{
	list-style:none;
	display:inline-block;
}

.rightc{
	display:inline;
}
.rightc li{
	list-style:none;
	display:inline-block;
	
}
<html>
	<head>
		<title>Home</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<header class="header">
			<div class="top">
				<div class="log">
					<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
				</div>
				<div class="element">
					<ul class="leftc">
						<li><a href="index.html">Buy</a></li>
						<li><a href="index.html">Rent</a></li>
						<li><a href="index.html">Sell</a></li>
						<li><a href="index.html">Mortgages</a></li>
						<li><a href="index.html">Agent finder</a></li>
						<li><a href="index.html">More</a></li>
					</ul>
				</div>
				<div class="right">
					<ul class="rightc">
						<li><a href="#">List your rental</a></li>
						<li><a href="#">Advertise</a></li>
						<li><a href="#">Sign in</a></li>
						<li><a href="#">Join</a></li>
						<li><a href="#">Help</a></li>
					</ul>
				</div>
			</div>
		
		</header>
	
	
	
	</body>
</html>

1 Ответ

0 голосов
/ 18 января 2019

Объяснение в комментариях CSS, где вносятся изменения.

  1. Укажите высоту заголовка

  2. Можно настроить высоту верхней части на 100%, чтобы она покрывала всю высоту жатки.

  3. Свойства, добавляемые в div с классом log 

    .top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}


.header{
	position:relative;
	margin:0;
	padding:0;
    height:30vh;/*giving height to header*/
}


.top{
	height:100%;/*making it to cover complete header*/
	border:1px solid #000;
}

.logo{
	height:100%;
	display:inline;
 
}
/* properties to be added to log div*/
.top>.log{
    height: 100%;
    margin: 0;
    width: 200px;
    display: inline;
    float: left;
}
.element{
    /*removing the clear property*/
	border:1px solid #000;
	float:left;
}
.leftc{
	display:inline;
}
.leftc li{
	list-style:none;
	display:inline-block;
}

.rightc{
	display:inline;
}
.rightc li{
	list-style:none;
	display:inline-block;
	
}
<html>
	<head>
		<title>Home</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<header class="header">
			<div class="top">
				<div class="log">
					<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
				</div>
				<div class="element">
					<ul class="leftc">
						<li><a href="index.html">Buy</a></li>
						<li><a href="index.html">Rent</a></li>
						<li><a href="index.html">Sell</a></li>
						<li><a href="index.html">Mortgages</a></li>
						<li><a href="index.html">Agent finder</a></li>
						<li><a href="index.html">More</a></li>
					</ul>
				</div>
				<div class="right">
					<ul class="rightc">
						<li><a href="#">List your rental</a></li>
						<li><a href="#">Advertise</a></li>
						<li><a href="#">Sign in</a></li>
						<li><a href="#">Join</a></li>
						<li><a href="#">Help</a></li>
					</ul>
				</div>
			</div>
		
		</header>
	
	
	
	</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...