html - 流体メトロボックス

Question

以下は、メトロタイル形式で受講したコースを入力するjsフィドルです。問題は、テキストが増加しても、それに応じてボックスの幅が増加しないことです。また、コース名の長さが増加する場合は、それに応じてボックスの幅を変更する必要があります。

http://jsfiddle.net/WFZ3d/

<div style="width: 400px;
">
<div style="
background-color:#2B547E; 
color: white;
padding: 20px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
">
    Courses
</div>
<div style="-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; border:1px solid #CCC; padding:10px;">

<div style="margin:5px;padding:10px; background-color:#3ea055; color:white; font-size:20px;  width:60px;
    height:60px;
    max-width:auto;
    ">Mathhhhh</div>

</div>
</div>

Answer 1

ヒント: DOM 要素とスタイルを分離します。インライン スタイルはお勧めできません。

あなたの問題は、ボックスの幅を設定していることです。ボックスをインラインブロックに変更する必要があります。

私はあなたのフィドルを更新しました - http://jsfiddle.net/WFZ3d/2/

<div style="margin:5px;padding:10px; background-color:#3ea055; color:white; font-size:20px; height:60px; display: inline-block;">Mathhhhh</div>