Html 同一直线上的航向和跨度_Html_Css

Html 同一直线上的航向和跨度

html css

Html 同一直线上的航向和跨度,html,css,Html,Css,我正在动态生成div，需要一个与此完全相同的解决方案（没有外部样式或css，因为它们在页面加载后动态生成时被忽略）。我不明白为什么浏览器会忽略我的文本对齐：对。我还想保持h和span（无p）。通常，我们应在同一基线上看到左侧的h和右侧的span： <!DOCTYPE html> <body> <div style="background-color:green;color:white;"> <h1 style="display:inline">

我正在动态生成div，需要一个与此完全相同的解决方案（没有外部样式或css，因为它们在页面加载后动态生成时被忽略）。我不明白为什么浏览器会忽略我的文本对齐：对。我还想保持h和span（无p）。通常，我们应在同一基线上看到左侧的h和右侧的span：

<!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>


绿色，希望的颜色
我希望把它展示在右边

Flexbox可以做到：


绿色，希望的颜色
我希望把它展示在右边

我做了很多调整，并决定将此作为解决问题的最简单方法。请注意，由于网络上提出了许多解决方案，很少有（以简单的方式）解决项目在不同大小时基线对齐的问题：

<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>


.left{文本对齐：左；字体大小：18px；字体重量：粗体；}
.right{float:right；字体大小：14px；顶部填充：4px}
左右

文本对齐：right

将内联内容与属性对齐到块元素的右侧。span是内联的。您是否在h1上尝试过

float:left

，在span上尝试过

float:right

，在wrapper div上尝试过

overflow:hidden

。也就是说，您可能应该寻求更多语义标记，链接样式表也不应该被忽略。。。动态内容并不是糟糕的标记的借口从我周五的尝试来看，在页面加载后动态添加的元素上，我在样式标记之间（或css表中）添加的任何内容都将被忽略，所以我认为这是正常的，只有内联样式在这一点上才起作用。不，我也没有用浮标获得很大的成功，因为右边的文本对齐了顶部，而不是基线……我现在正在运行片段，右边的文本在中间对齐，而不是在基线。明天我会在我真正的目标上尝试。坦克斯。