Question

我正在尝试将nav和img元素彼此相邻放置在页面顶部。

我将两个元素都放在top_bar容器中。

我尝试将top_bar设置为display: inline-block;，减小nav的宽度，然后将其浮动到左侧，也将img浮动到右侧。然后，我尝试了将它们组合使用，但是没有任何结果能满足我的需求。要么元素开始跳动，要么徽标放在top_bar边框下方。

我如何nav和img内联并且都在top_bar底部边框上方？

编辑：我还希望将nav元素放置在页面的最左侧，并将img放置在页面的最右侧。

<!DOCTYPE HTML>
	<html>
		<head>
			<style>
				#top_bar {
					border-bottom: 1px solid silver;
				}
				nav ul li {
					display: inline-block;
				}
				img {
					width: 130px;
					height: 30px;
				}
			</style>
		</head>
		<body>
			<div id="top_bar">
				<nav>
					<ul>
						<li>Link 1</li>
						<li>Link 2</li>
						<li>Link 3</li>
					</ul>
				</nav>
				<img src="cs_logo.png" alt="Image not found"></img>
			</div>
		</body>
	</html>

Answer 1

将display: flex;添加到#top_bar

#top_bar {
  border-bottom: 1px solid silver;
  display: flex;
  justify-content: space-between;
}
nav ul li {
  display: inline-block;
}
img {
  width: 130px;
  height: 30px;
}

<div id="top_bar">
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </nav>
  <img src="cs_logo.png" alt="Image not found"></img>
</div>

Answer 2

<!DOCTYPE HTML>
	<html>
		<head>
			<style>
				#top_bar {
					border-bottom: 1px solid silver;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
				}
				nav ul li {
					display: inline-block;
				}
               
				img {
					width: 130px;
					height: 30px;
				}
			</style>
		</head>
		<body>
			<div id="top_bar">
				<nav>
					<ul>
						<li>Link 1</li>
						<li>Link 2</li>
						<li>Link 3</li>
					</ul>
				</nav>
				<img src="cs_logo.png" alt="Image not found"></img>
			</div>
		</body>
	</html>

我们可以使用CSS flex属性来实现这一点。但是请确保使用供应商前缀来实现跨浏览器兼容性。

Answer 3

您的代码缺少一些声明。

首先，您的课程#top_bar应该具有宽度声明。为了使事情更容易，您可以使用类而不是仅声明图片大小。

这是我修改过的代码的小提琴：https://jsfiddle.net/Thorske/nyv6mwgz/

修改后的CSS：

       * {
             margin : 0:
             padding : 0;
            }
            #top_bar {
             margin : 0 auto;
             width : 100%;
            border-bottom: 1px solid silver;
            }
            .clear {
             clear : both;
            }
            nav { 
            float : left;
            width : 80%;
            }
            nav ul li {
                display: inline-block;
            }
            .img_container {
            float : right;
            width : 20%;
            }
            .img_conatiner img {
                width: 130px;
                height: 30px;
            }

修改的html：

<!DOCTYPE HTML>
    <html>
        <head>

        </head>
        <body>
            <div id="top_bar">
                <nav>
                    <ul>
                        <li>Link 1</li>
                        <li>Link 2</li>
                        <li>Link 3</li>
                    </ul>
                </nav>
 <div class="img_container">
                <img src="cs_logo.png" alt="Image not found" />
</div>
<div class="clear"></div>
            </div>
        </body>
    </html>

只有简单的更改：

#top_bar现在具有定义的宽度。
nav现在具有定义的宽度和浮点数。
添加了具有定义宽度和浮点数的类“ img_container” 其中包含图片。
班级清晰可以让一切按原样保留。

因为我不知道您是否想让代码“响应”您自行设置“宽度”的值。

将nav和img元素置于行内并在公共边框上方

3 个答案: