html - 只希望宽度为填充 + 文本本身

Question

的宽度.start应该是 = 文本大小 + 填充，所以我使用了显示内联块，但是我得到了类似这样的结果。

问题演示 http://jsfiddle.net/d4Ajj/8/

我想要达到的目标：

.bigcontainer
{
    width: 1000px;
    height: 400px;
    background-color: rgb(245,245,245);
    border-radius: 10px;
    margin: auto;
    margin-top: -50px;
}


.racingbox
{
    width: 800px;
    height: 100px;
    margin: auto;
    background: yellow;
    position: relative;
}


.start
{
    display: inline-block;
    padding: 20px;
    margin-left: 100px;
    color: white;
    background: blue;
    font-family: Arial;
    font-size: 16px;
    font-weight: 900;
}

Answer 1

如果将元素的display属性设置为inline-block，则可以：

.start {
    display: inline-block;
    padding: 20px;
    color: white;
    background: blue;
    font-family: Arial;
    font-size: 16px;
    font-weight: 900;
}

JS 小提琴演示。

---

针对已编辑的问题进行了更新

鉴于新添加的 HTML 和视觉参考，我建议添加以下内容：

.racingbox,
.start {
    /* forces the elements to a new line */
    clear: both;
    /* floats the elements, removing them from the 'normal'
       document-flow, allowing the previous rule to apply */
    float: left;
}

JS 小提琴演示。