Question

我需要你的帮助。

如何重新调整＆＃34;换行＆＃34;的div宽度，使其宽度相对于其中的其他内容。现在它似乎是自动100％？

以下是问题的图片： enter image description here

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#icon {
    background: url("images/glass.png") no-repeat left;
    width: 20px;
    float: left;
}
#txt1 {
    width: 150px;
    border: none;
}
#wrap {
    border: 1px solid red;
    width: auto;
}
</style>

</head>

<body>

<div>

    <div id="wrap">
        <div id="icon"></div>
        <div><input id="txt1" type="text"/></div>
    </div>

</div>

</body>

</html>

Answer 1

我会使用display: inline-block;。

#wrap {
    display: inline-block;
}

Answer 2

我想这应该是这样的：

<div style="width:400px;">

Answer 3

默认情况下，display: block元素将占用整个可用宽度。试试这个：

display: inline-block;

但是，这会导致您的div不再导致换行符，因此您可能需要插入<br>元素

Answer 4

默认情况下，<div>元素是块级别，并且将使用100％的可用宽度，除非您不设置样式。您必须将其display CSS属性设置为inline-block，以便根据其中的元素进行扩展。

使包装div相对于内容的宽度

4 个答案: