2

私はもっ​​と複雑に見えることをたくさんやりました。これは簡単なことだと思いましたが、どこが間違っているのかわかりません。

プログレスバーがあり、その上にバー自体に非常に近いテキストが必要です。アフター付きのプレーンテキストだけを使用する場合、テキストは必要な場所にありますが、cssを使用してこれらの見出しをフォーマットしたいと思います。これを行うと、cssで行の高さを非常に低く設定しても、行の間隔を十分に小さくすることができないようです。

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

また、bar1Titleとbar1Title2を同じ行に配置したいと思います。これは、私にはできないと思われるもう1つの簡単なタスクです。

4

4 に答える 4

1

h5はblock level element..です。したがって、これらの要素を並べて表示する場合は、これらの要素の表示を明示的に設定する必要があります。

h5
{
    display : inline;
}

また、marginプロパティを微調整して、線の高さが機能しない場合は負に設定することもできます。

于 2012-10-29T21:22:07.210 に答える
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 
<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

見出しタグには、考慮する必要のあるデフォルトのマージンがいくつかあります。

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 に答える