Question

现在我正在为 HTML，CSS 的移动页面编码。我想设置一个框，其背景颜色更漂亮，一些文字显示信息。但是当我设置宽度为100％时，框的宽度与屏幕的宽度不一样。并且它不是我想要的。我怎样才能在css中解决它？

我尝试过“宽度：100％”，但失败了。我的CSS是：

div
{
    position: absolute;
    top: 105px;
    left: 0;
    height: 47px;
    width: 100%;
    line-height: 47px;
    background-color: rgba(255,108,108,0.5);
}

HTML是：

<div><span>my number:<span><span>517014910</span></div>

Answer 1

请参阅fiddle here

使用width : 100%

div{position: absolute;top: 105px;left: 0;height: 47px;width: 100%;line-height: 47px;background-color: rgba(255,108,108,0.5);}

Answer 2

尝试使用框大小调整属性。它允许您以某种方式定义某些元素以适合某个区域.border-box值使最终呈现的框成为声明的宽度，并在框内部切割任何边框和填充。尝试在您的案例中实施以下示例。这里它指的是textarea，但您可以尝试在包含您的文本的其他元素上实现它：

textarea { 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 3

为什么不添加“left：0; right：0;”既然你已经处于绝对定位状态了？

请看小提琴：http://jsfiddle.net/3ZBXV/

<div style="position:absolute;...;left:0;right:0;" />

如何设置与屏幕宽度相同的盒子宽度？

3 个答案: