2

短編小説

CSSトリックのプログレスバーコードを使用しました。見栄えを悪くせずにプログレスバーに境界線を追加することはできません。

長い話

ここではCSSトリックのプログレスバーコードを使用しました

元のコードにいくつかの変更を加えて、次のようなものにしました

http://dl.dropbox.com/u/8743819/reducedtestcase/ProgressBars/custombar.html

やりたかったこと

  1. メーター>スパンに勾配があります（完了）
  2. メーターとスパンは、それらの間に間隔がなく、ぴったりと締まっています（完了）
  3. スパンには、異なる色の1または2pxの境界線があります。

（完了）とマークされたものは達成されていることに注意してください。こちらのデモをご覧ください。

結果として私が試し、得たもの

  • メーター>スパンに境界線を追加しようとしましたが、スパンがはるかに大きくなりました。
  • メーター>スパンにパディングを追加してみました。同じ話。
  • メーター自体にマージンを追加してみました。すると、間隔があるように見えます。

必要なもの

動作するための要件1、2、および3。

よくある質問

  1. これはあなたの完全なアプリですか？

いいえ。問題の説明にできるだけ影響を与えることなく、問題を説明するために不要なコードをできるだけ削除する、縮小されたテストケースを実行しました。

開示

  1. 私はこの同じ質問をcss-tricks.comにクロスポストして、私の問題にもっと注意を向けています。

最終的解決

デモの一部としてここに掲載された最終的な解決策。

4

2 に答える 2

1

質問を理解している場合は、CSSボックスサイズ設定プロパティを使用できます。このように書いてください：

.meter > span{
 border:2px solid red;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}

詳細については、このhttp://css-tricks.com/box-sizing/を読むことができます

于 2012-12-18T09:11:57.710 に答える
0

私はborder-width:2pxスパンにaを追加しようとしましたが、あなたが言ったように、これは親から拡張されますdiv。しかし、これを高さで説明すると、問題ないように見えます。下記を参照してください。

親のdivの高さを24pxに設定します.meter {height:24px;}

高さ100％の代わりに、スパンの高さを20pxに設定します.meter > span {height:20px;}

幅を修正するには、親divのパディングをに設定します.meter {padding: 0px 5px 0px 0px;}

それは正しい方法ではないと確信していますが、問題ないように見えます。

要約すれば

.meter {height:24px; padding: 0px 5px 0px 0px;}

.meter > span {height:20px;}

于 2012-12-18T08:28:08.227 に答える