Question

以下是我的js小提琴，其中我填写了以地铁瓦片形式进行的课程。问题是如果文本增加，则框不会相应地增加其宽度。此外，如果课程名称长度增加，则框应相应地调整其宽度。

<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

Protip：分离您的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>

流体地铁箱

1 个答案: