Question

背景：我正在研究的当前设计需要一行徽标，然后是菜单。我想要的是徽标和菜单（由两部分组成，这里是两个无序列表）将显示为一行或一部分。

标题的部分：标题由徽标图像，左侧菜单和右侧菜单组成。左侧菜单和右侧菜单是代码中无序的列表项。

面临的问题：我正在尝试将徽标图片和菜单添加到一个div元素中，以将它们整合到一行中。但是图像显示在顶部，然后显示菜单元素。我尝试使用display：inline将徽标图像放在一侧，并在徽标图像之后开始菜单，但是它不起作用。我正在共享我的代码。可以在不使用绝对位置的情况下将图像与菜单项一起定位和对齐吗？代码中只有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>

Answer 1

说明更改的CSS注释。

将高度赋予标题
可以将顶部的高度设置为100％，因为它可以覆盖整个标头高度。

要添加到类 log

的div中的属性

.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>

如何在不使用绝对位置的情况下将徽标图像和菜单项对齐在一行中？

1 个答案: