Question

我已经做了很多看起来比较复杂的东西，我觉得这很容易，但我不知道自己哪里出错了。

我有一个进度条，并且需要一些文本在它上方，非常靠近酒吧本身。如果我只使用带有after的纯文本，那么文本就是我想要的地方但是我想用css来格式化这些标题。当我这样做时，即使我在css中将行高设置得非常低，我似乎也无法将线间距缩小。

<h5 id="bar1Title"></h5><h5 id="bar1Title2"></h5>
<progress id="bar1" value="30" max="255"></progress>

另外我想把bar1Title和bar1Title2放在同一行，这是我似乎无法做的另一个简单的任务！

Answer 1

h5 是block level element ..因此，如果您希望这些元素并排显示，则需要明确设置display：inline。

h5
{
    display : inline;
}

如果行高不起作用，你也可以调整margin属性并将其设置为负值。

Answer 2

<h5 id="bar1Title" style="margin-bottom:-2px;"></h5><h5 id="bar1Title2" style="margin-bottom:-2px;"></h5>
<progress id="bar1" value="30" max="255"></progress>

尝试使用style =“margin-bottom：-2px;”并根据需要增加px的值，使其沿着这条线

Answer 3

这会吗？

<div>
    <span id="bar1Title">111</span>
    <span id="bar1Title2">222</span>
</div>
<div style="line-height: 0px;margin-top: -3px;">
    <progress id="bar1" value="30" max="255"></progress>
</div>

或者

<h5 id="bar1Title" style="display: inline">111</h5>
<h5 id="bar1Title2" style="display: inline">222</h5>
<div style="line-height: 0px;margin-top: -3px;">
    <progress id="bar1" value="30" max="255"></progress>
</div>

Answer 4

标题标记有一些您需要考虑的默认边距。

http://www.htmlcssdeveloper.com/tutorial/advanced-html-css/what-is-the-default-margin-of-h1-h2-h3-h4-h5-h6.html

您必须清除该保证金

<h5 style="margin: 0px;"></h5>

似乎无法获得我想要的行间距

4 个答案: