1

これは、そこにいるCSSの達人向けです...

このプログレス メーターの要素を適切かつ効率的に揃えようとしています。ここでそれを見てください：

http://jsfiddle.net/arturo_sanz/UFPnZ/embedded/result/

問題ないように見えますが、これらのラベルの配置に固執しており、CCS が複雑になりすぎて効率的ではありません。私が特に心配しているのは、相対的なものであるべきなのに、絶対的な参照であるtop: 4px;in lineです。行の CSS コードに47も満足していませんが、バーを左側のラベルから遠ざけるためのより良い方法を見つけることができませんでした。#min21-26

確認するjsfiddleは次のとおりです。

http://jsfiddle.net/arturo_sanz/UFPnZ/

その CSS コードを改善していただければ幸いです ;)

4

3 に答える 3

1

作業コードは次のとおりです。http://jsfiddle.net/3A9kM/2/

更新された CSS:

.progress-label {
    color: #CC0000;
    display: block;
    text-align: center;
    float: left;
    margin: 4px auto auto;
    width: 100%;
}
/*Removed position: absolute;top:4px;*/
/*Added: float: left;margin: 4px auto auto*/

乾杯！！！:)

于 2013-10-11T06:22:07.733 に答える
0

行の良い修正47は次のとおりです。

margin: 4px auto;

私のJSFiddleを参照してください。

より短く、より美しく、よりクリーンに。

于 2013-10-11T05:59:35.683 に答える
0

デモ

HTML:

<div id="progbar" class="frame">
    <span id="min" class="min-max-label ui-widget">200</span>
    <span id="progressbar">
        <span class="progress-label">Loading...</span>
    </span>
    <span id="max" class="min-max-label ui-widget">300</span>
</div>

CSS:

#progBar {
    text-align: center;
    margin:0 auto;
}
#progBar span{
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    color: #CC0000;
}
#progressbar {
    position:relative;
    width: 60%;
    height: 36px;
    margin: 0 15px;
    border-color: #CC0000;
}
.ui-progressbar-value {
    position: absolute;
    top: 0;
    background: #CCCCCC url(http://download.jqueryui.com/themeroller/images/ui-bg_highlight-hard_100_cccccc_1x100.png) 50%;
}
.progress-label{
    position: relative;
    z-index: 1;
    top:4px;
}
于 2013-10-11T06:46:50.527 に答える