如何在div菜单中将指定链接右对齐且不换行？

你之前的问题出在：<a>是行内元素，text-align:right属性对它无效——这个属性是用来控制块级元素内部子元素的对齐方式，不是给行内元素本身用的。另外直接新增div会换行，是因为div默认是块级元素，会独占一行。

下面给你两种简单可行的解决方法：

方法一：Flex布局（推荐，现代网页常用方案） #

通过给包裹链接的<p>标签设置flex布局，一键实现左右对齐，且不会换行：

.paragraf {
  display: flex;
  justify-content: space-between;
}

HTML可以简化掉多余的right类：

<div class="meio">
    <p class="paragraf">
        <a href="/php_01/">menu</a> 
        <a href="/PHP2024_01/">quit</a>
    </p>
</div>

原理：display:flex把<p>变成弹性容器，justify-content:space-between会让容器内的子元素（两个链接）分别靠向容器的左右两端，自动填充中间空隙，完美满足需求。

方法二：Float浮动方案 #

如果需要兼容极老浏览器，可以用float来实现：

.right {
  float: right;
}
.paragraf {
  overflow: hidden; /* 防止父元素高度塌陷，确保包裹住浮动的链接 */
}

HTML保留原来的结构即可：

<div class="meio">
    <p class="paragraf">
        <a href="/php_01/">menu</a> 
        <a class="right" href="/PHP2024_01/">quit</a>
    </p>
</div>

原理：float:right让quit链接靠右浮动，父元素加overflow:hidden是为了触发BFC（块级格式化上下文），避免父元素因为内部子元素浮动而失去高度。

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