Question

我正在动态生成div并需要一个完全相同的解决方案（没有外部样式或css，因为在页面加载后动态生成它们时会被忽略）。我不明白为什么浏览器会忽略我的text-align：right。我也想保持h和跨度（没有p）。通常情况下，我们应该在左侧看h，并在同一基线上向右跨越：

<!DOCTYPE html>
<body>

<div style="background-color:green;color:white;">
  <h1 style="display:inline">Green, color of hope</h1>
  <span style="text-align:right">I hope to display this to the right</span>
</div>

</body>
</html>

Answer 1

Flexbox可以做到这一点：

＆＃13;

<div style="background-color:green;color:white; display:flex; justify-content:space-between; align-items:baseline;">
  <h1>Green, color of hope</h1>
  <span>I hope to display this to the right</span>
</div>

＆＃13;

Answer 2

我调整了很多并决定使用它作为我问题的最简单的解决方案。请注意，尽管在网络上提出了许多解决方案，但很少有人（以简单的方式）解决项目在具有不同大小的情况下进行基线对齐的问题：

<style>
    .left{text-align:left;font-size:18px;font-weight:bold;}
    .right{float:right;font-size:14px;padding-top:4px}
</style>   

<span class='left'>Left</span><span class='right'>Right</span>

标题和跨度在同一行

2 个答案: