Question

现在我正在练习创建一个标题部分，其中包含一个用作徽标的图像和一个用作导航菜单的无序列表。这两个元素都保存在div元素中，我想在div元素中将图像对齐到左边，而div元素右边则是无序列表。那我该怎么办呢？其次，我只愿意使用相对财产。不是绝对的＆＃39;！由于我想在div元素的中间垂直对齐列表并且位置绝对，我无法垂直对齐列表与垂直对齐属性。如果我使用浮动，那么相同的情况就在那里。我无法将列表垂直对齐到中间，我想做。所以，我只想知道如何使用相对定位属性将列表放在div元素的右侧。

＆＃13;

<style>
.header-section {
  background-color:red;
}
ul {
  display:inline-block;
  list-style:none;
}
ul li {
  display:inline-block;
}
</style>

＆＃13;

<!DOCTYPE html>
<html>
	<body>
		<div class="container">
			<div class="header-section">
				<img src="some-image.jpg">
				<ul>
					<li>Home</li>
					<li>About Us</li>
				</ul>
			</div>
		</div>
	</body>
</html>

＆＃13;

Answer 1

将display:flex用于父div并提供justify-content: space-between;

＆＃13;

.header-section
{
background-color:red;
    display: flex;
    justify-content: space-between;

}
ul
{
display:inline-block;
list-style:none;
}
ul li
{
display:inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>
	<body>
		<div class="container">
			<div class="header-section">
				<img src="some-image.jpg">
				<ul>
					<li>Home</li>
					<li>About Us</li>
				</ul>
			</div>
		</div>
	</body>
</html>

＆＃13;

Answer 2

Flexbox可以做到这一点：

支持IE10和Up。

.header-section {
  background-color: pink;
  display: flex;
  align-items: center;
}
ul {
  list-style: none;
  margin-left: auto;
}
ul li {
  display: inline-block;
}

<!DOCTYPE html>
<html>

<body>
  <div class="container">
    <div class="header-section">
      <img src="http://lorempixel.com/image_output/abstract-q-c-50-50-8.jpg">
      <ul>
        <li>Home</li>
        <li>About Us</li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 3

最简单的解决方案是使用float，就像下面的代码段一样：

.header-section{
  background-color:red;
}

ul{
  display:inline-block;
  list-style:none;
}

ul li{
  display:inline-block;
}

.header-section img{
  float: left;
}

.header-section ul {
  float: right;
}
.header-section p {
  clear: both;
}

 <div class="container">
   <div class="header-section">
      <img src="some-image.jpg">
      <ul>
        <li>Home</li>
        <li>About Us</li>
      </ul>
      <p></p>
  </div>
</div>

注意我添加了一个段落元素来清除浮动。

Answer 4

您可以像这样使用float：

ul {
    display:inline-block;
    list-style:none;
    float: right;
}

img {
    float: left;
}

Answer 5

你可以这样做

.header-section {
  background: red url('http://lorempixel.com/200/200/sports/2/') no-repeat left center;
  background-size: contain;
  text-align: right;
}
ul {
  display:inline-block;
  list-style:none;
}
ul li {
  display:inline-block;
}

<div class="container">
  <div class="header-section">
    <ul>
      <li>Home</li>
      <li>About Us</li>
    </ul>
  </div>
</div>

右对齐div中的元素只与相对属性

5 个答案: