Question

是否可以在html左右放置文本

我希望它将文本左右放在同一行。

我的HTML代码：

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>RPG Clicker</title>
        <link rel="stylesheet" type="text/css" href="interface.css" />
    </head>

    <body>
       <left>Level: <span id="level">1</span></left>
       <right>Gon level: <span id="gon">0</span></right>
    </body>
    </html>

Demo

Answer 1

HTML

<div id="textbox">
  <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>

CSS

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

来源：Left Align and Right Align Text on the Same Line

Answer 2

请尝试以下操作：

<span style="float:right">Right</span>
<span style="float:left">Left</span>

Answer 3

html中没有<left>或<right>标记。要实现您想要的目标，您必须使用CSS。

＆＃13;

.align-left {
  float: left;
  width:33%;
}

.align-center {
  text-align: center;
  display: inline-block;
  width:34%;
}

.align-right {
  float: right;
  text-align: right;
  width:33%;
}

＆＃13;

<html>
  <head>
  </head>
  <body>
    <span class="align-left">Level: <span id="level">1</span></span>
    <span class="align-center">Text</span>
    <span class="align-right">Gon level: <span id="gon">0</span></span>
  </body>
</html>

＆＃13;

Answer 4

您可以使用：

一个有一行两列的表，左边一个左对齐，右边一个右对齐;
带有“行”和两个“列”的CSS网格系统：右对齐第二列（请参阅例如Bootstrap;
您在左对齐内容之前放置的float: right; text-align: right; div。

Answer 5

尝试使用：

<left style="float:left">Level: <span id="level">1</span></left>
<center style="
    float: left;
    position: relative;
    left: 45%;
">Text</center>
    <right style="float:right">Gon level: <span id="gon">0</span></right>

您可以从w3schools.com获取有关浮动和位置的更多信息

如何在html中左/右放置文本？

5 个答案: