Html 水平div对齐

你好

我正在使用输入样式中的给定宽度创建一个百分比栏。我希望给定的div彼此水平对齐，但不重叠，只是紧跟在后面。我怎么可能做到呢

下面是一个简单的代码

#一个{
背景：绿色；
高度：20px；
}
#两个{
背景：蓝色；
高度：20px；
}
#三{
背景：灰色；
高度：20px；
}

宽度没有固定值，所以我不能只保留边距。我一直在调整这个后备代码。没有这样的运气。提前谢谢

添加此css：

#one, #two, #three {display:inline-block;}

#one, #two, #three {float:left;}

或者这个css：

#one, #two, #three {display:inline-block;}

#one, #two, #three {float:left;}

---

使用显示：内联块；对于要居中对齐的每个div，将其包装在一个新容器中，并使用文本align:center；应用于它。

这可能会有所帮助

#one,#two,#three{
    height: 20px;
    padding: 0;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

它还支持旧的IE版本

#首先{
背景：绿色；
高度：20px；
左边距：2倍；
颜色：白色；
浮动：左；
}
#第二{
背景：蓝色；
高度：20px；
左边距：2倍；
颜色：白色；
浮动：左；
}
#第三{
背景：灰色；
高度：20px；
左边距：2倍；
颜色：白色；
浮动：左；
}
20
30
40

请将代码放在jsfiddle.net中，并在此处提供链接第一个太有效了，只要你去掉每个div之间的空格是的，我也看到了很多合法的答案，但如果我感谢大家，我会很恼火。