如何为同一div内的超链接设置差异化布局：图片左浮，按钮右浮

针对你要实现的「图片链接左对齐、文字链接右对齐」的导航栏，给你两种入门友好的实现方式：

方式一：Flexbox布局（推荐，现代布局方式） #

Flexbox能轻松实现元素的左右分布和垂直对齐，代码简洁易维护。

修改后的HTML代码 #

<div class="topnav">
  <a class="logo-link" href="index.html"><img src="images/Logo-header.png" alt="Logo" /></a>
  <div class="nav-links">
    <a href="index.html">Home</a>
    <a href="overmij.php">Over mij</a>
    <a href="Webshop.php">Webshop</a>
    <a href="Contact.php">Contact</a>
  </div>
</div>

修改后的CSS代码 #

/* 导航容器设置flex布局，实现左右元素分布+垂直居中 */
.topnav {
  display: flex;
  justify-content: space-between; /* 两端对齐，自动分开左右元素 */
  align-items: center; /* 垂直方向居中对齐 */
  padding: 0 5%; /* 左右留白，替代原图片的margin-left */
}

/* 图片链接单独样式：去掉全局a标签的padding，避免图片被撑开 */
.topnav .logo-link {
  padding: 0;
  margin-top: 0;
}

/* 图片尺寸控制 */
.topnav .logo-link img {
  height: 50px;
  width: 125px;
}

/* 文字链接样式：保留原样式，去掉float */
.topnav .nav-links a {
  display: block;
  color: #253237;
  text-align: center;
  padding: 20px 25px;
  text-decoration: none;
  margin-top: 20px;
}

方式二：Float浮动布局（兼容旧浏览器） #

如果需要兼容老版本浏览器，可以用浮动实现，核心是让文字链接整体右浮动。

修改后的HTML代码 #

<div class="topnav">
  <a class="logo-link" href="index.html"><img src="images/Logo-header.png" alt="Logo" /></a>
  <div class="nav-links">
    <a href="index.html">Home</a>
    <a href="overmij.php">Over mij</a>
    <a href="Webshop.php">Webshop</a>
    <a href="Contact.php">Contact</a>
  </div>
</div>

修改后的CSS代码 #

/* 清除浮动，避免导航容器高度塌陷 */
.topnav::after {
  content: "";
  display: table;
  clear: both;
}

/* 图片链接左浮动 */
.topnav .logo-link {
  float: left;
  margin-left: 5%;
  padding: 0;
  margin-top: 20px;
}

/* 图片尺寸控制 */
.topnav .logo-link img {
  height: 50px;
  width: 125px;
}

/* 文字链接容器整体右浮动 */
.topnav .nav-links {
  float: right;
  margin-right: 5%;
}

/* 文字链接左浮动，排成一行 */
.topnav .nav-links a {
  float: left;
  display: block;
  color: #253237;
  text-align: center;
  padding: 20px 25px;
  text-decoration: none;
  margin-top: 20px;
}

关键注意点 #

1. 把文字链接放进统一容器（.nav-links），这样能作为整体控制位置，避免单个链接分散错位。
2. 给图片链接单独加class（.logo-link），专门覆盖全局a标签的样式，比如去掉不必要的padding、margin。
3. Flexbox方式无需处理浮动塌陷问题，代码更简洁，推荐优先使用。

内容的提问来源于stack exchange，提问作者Brian