2

我做了很多看起来更复杂的事情，我认为这会很容易，但我只是不知道我哪里出错了。

我有一个进度条，希望在它上面有一些文字，非常靠近进度条本身。如果我只使用带有 after 的纯文本，那么文本就是我想要的，但我想使用 css 来格式化这些标题。当我这样做时，即使我在 css 中将 line-height 设置得非常低，我似乎也无法使行距足够小。

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

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

4

4 回答 4

1

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

h5
{
    display : inline;
}

如果行高不起作用，您也可以调整边距属性并将其设置为负数。

于 2012-10-29T21:22:07.210 回答
0 
<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 的值，以使其顺利进行

于 2012-10-29T21:20:20.677 回答
0

这会吗？

<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>
于 2012-10-29T21:22:46.967 回答
0

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

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>
于 2012-10-29T21:24:18.277 回答