-2

の幅は.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;
}
4

1 に答える 1

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 フィドルのデモ。

于 2013-09-17T22:27:24.227 に答える