如何通过CSS与HTML将语言选择div向右对齐？

我太懂这种感觉了——明明看起来是个小布局问题，但CSS技能一生疏就卡壳，真的很闹心。咱们来快速搞定这个语言文本的对齐问题：

问题根源 #

你现在给logo加了float: left，但承载语言文本的.language是默认的块级元素，会占满整行宽度，所以自动被挤到了logo的下方。要实现你想要的logo左、语言文本右且同处一行的效果，用Flexbox布局是最直观稳定的方案。

具体修改步骤 #

1. 优化HTML结构（让布局更清晰）

把logo和语言文本放到同一个父容器里，方便统一控制布局：

<div class="div-main">
  <!-- 新增父容器包裹logo和语言文本 -->
  <div class="header-row">
    <img src="logo_piktogrami/logo_swanky.png" alt="logo" class="logo">
    <div class="language">UK / KR / HR</div>
  </div>
  <!-- 原下拉菜单部分保持不变 -->
  <div class="dropdown">
    <button class="dropbtn">HOSTEL</button>
    <div class="dropdown-content">
      <a href="#">O NAMA</a>
      <a href="#">POVJEST</a>
      <a href="#">MENZA</a>
      <a href="#">PARTNERI</a>
    </div>
    <button class="dropbtn">REZERVACIJA</button>
    <button class="dropbtn">GALERIJA</button>
    <button class="dropbtn">INFO</button>
    <button class="dropbtn">KAKO DO NAS</button>
  </div>
</div>

2. 添加并调整CSS样式

给新增的.header-row设置Flex布局，同时调整元素的对齐方式：

/* 新增父容器的Flex布局 */
.header-row {
  display: flex;
  justify-content: space-between; /* 让logo左对齐、语言文本右对齐 */
  align-items: center; /* 让两个元素垂直居中对齐 */
  padding: 0 15px; /* 可选：加一点内边距避免内容贴边 */
}

/* 移除logo原来的float，交给Flex控制布局 */
.logo{
  width: 130px;
  height: 130px;
  /* 删掉 float: left; */
  margin-left: 5px;
}

.language{
  font-family: 'Istok Web', sans-serif;
  font-weight: bold;
  text-align: right; /* 确保文本本身右对齐 */
}

备选方案（不修改HTML结构） #

如果不想动HTML，也可以直接调整现有元素的布局属性：

/* 让logo的容器和language变成行内块元素，同处一行 */
.div-main > div:first-child, .div-main > .language {
  display: inline-block;
  vertical-align: middle; /* 垂直居中对齐 */
}

/* 让language右对齐 */
.div-main > .language {
  float: right;
  margin-right: 15px;
  font-family: 'Istok Web', sans-serif;
  font-weight: bold;
}

/* 确保logo容器不占满整行 */
.div-main > div:first-child {
  width: auto;
}

两种方法都能实现你要的效果，更推荐第一种Flex方案，它是现代布局的首选，兼容性好且后续维护更简单～

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