2

长话短说

使用来自 CSS 技巧的进度条代码。无法在进度条上添加边框而不使其看起来更糟。

很长的故事

我在这里使用了 CSS 技巧中的进度条码

我对原始代码进行了几处更改以获得看起来像这样的东西

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

我想要完成的

  1. 仪表 > 跨度有梯度（完成）
  2. 仪表和跨度紧密贴合，它们之间没有间距（完成）
  3. 跨度具有不同颜色的 1 或 2 像素边框。

请注意，那些标记（完成）已完成。请在此处查看演示。

我尝试并得到的结果

  • 我尝试为仪表>跨度添加边框，但这导致跨度更大。
  • 我尝试向仪表>跨度添加填充。相同的故事。
  • 我尝试为仪表本身添加边距。然后看起来有间距。

我需要的

要求 1、2 和 3 才能工作。

常见问题

  1. 这是您的完整应用程序吗？

不。我做了一个简化的测试用例，我去掉了尽可能多的不必要的代码来解释我的问题，而不会影响问题陈述。

披露

  1. 我在这里的 css-tricks.com 上交叉发布了同样的问题，以引起对我的问题的更多关注。

最终解决方案

最终解决方案作为演示的一部分发布在这里。

4

2 回答 2

1

如果了解您的问题，您可以为此使用 CSS box-sizing属性。像这样写：

.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

我尝试将 a 添加border-width:2px到跨度中，正如您提到的那样，它从 parent 延伸出来div。但如果你用高度来解释这一点，它看起来还不错。请看下文。

将父 div 高度设置为 24px.meter {height:24px;}

而不是 height 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 回答