Question

＆＃13 ;

＆＃13;

 h1 {
        text-align: center;
    }
    
    p {
        font-family: verdana;
    }

＆＃13;

 
    
    <h1>Taxes</h1>
    <p>Gross Income: <span style="text-align:right;">$250, 000.00</span></p>

＆＃13;

让我们说我想显示总收入：左侧和页面右侧250,000美元（两者都需要在同一条线上）。

我该怎么做呢？当前代码不起作用。

Answer 1

使用float <span style="float:right;">。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-align: center;
}

p {
    font-family: verdana;
}
</style>
</head>
<body>

<h1>Taxes</h1>
<p>Gross Income: <span style="float:right;">$250, 000.00</span></p>

</body>
</html>

＆＃13;

Answer 2

布局网站的一种更现代的方法是使用flexbox。您可以在父容器中指定display: flex，并在子容器中设置弹性比例。这样的事情应该有效：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-align: center;
}

div.total {
    font-family: verdana;
    display: flex;
}

div.total div {
    flex: 1;
}
</style>
</head>
<body>

<h1>Taxes</h1>
<div class="total">
    <div>Gross Income:</div>
    <div style="text-align: right">$250, 000.00</div>
</div>

</body>
</html>

此外，请勿使用<p>标记，除非它实际上是一个段落。

您可以查看caniuse.com以查看浏览器与Flexbox的兼容性。

在<p>标签内的span标签，使右侧的其他一半内容

2 个答案: