如何在不更改HTML的情况下在同一行上对齐两个元素

在不更改HTML的情况下，在同一行上对齐两个元素可以通过CSS来实现。以下是几种常见的方法：

使用浮动（float）属性：将两个元素都设置为浮动，然后使用clear属性来清除浮动，使得后续元素不受影响。示例代码如下：

<style>
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
</style>

<div class="clearfix">
    <div class="left">左侧元素</div>
    <div class="right">右侧元素</div>
</div>

使用Flexbox布局：将包含两个元素的父容器设置为Flex容器，然后使用Flex属性来控制元素的对齐方式。示例代码如下：

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }
</style>

<div class="container">
    <div>左侧元素</div>
    <div>右侧元素</div>
</div>

使用Grid布局：将包含两个元素的父容器设置为Grid容器，然后使用Grid属性来控制元素的位置和对齐方式。示例代码如下：

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
</style>

<div class="container">
    <div>左侧元素</div>
    <div>右侧元素</div>
</div>

这些方法都可以在不更改HTML结构的情况下实现在同一行上对齐两个元素。具体选择哪种方法取决于具体的需求和布局要求。