Question

我有一个div，其中包含包含带输入表的表单。问题是，即使我将其设置为220px（宽度：220px），div仍保持100％的宽度使用。

这是截屏http://i.imgur.com/YtEzzuI.jpg?1

以下是删除了trs和tds的HTML

<div class="prikol_filter_div">
    <form name="arrFilter_form" action="" method="get" class="prikol_filter_form">
        <table class="data-table" cellspacing="0" cellpadding="2">
            <thead>
                <tr>
                    <td colspan="2" align="center">
                            <span class="prikol_filter_title">ПОДОБРАТЬ ПОДАРОК</span><hr>
                    </td>
                </tr>
            </thead>
            <tbody>trs and tds</tbody>
            <tfoot>trs and tds</tfoot>
        </table>
    </form>
</div>

和CSS

.prikol_filter_div {
  margin: 0px;
  display: block;
  width: 220px;
}

.prikol_filter_form {
  margin-bottom: 40px;
  width: 222px;
  background-color: #c3150d;
  border-radius: 4px;
  position: relative;
  right: 17px;
}

没有应用其他CSS样式。

Answer 1

不是。它使用您指定的220px。

您的检查员也会使用蓝色突出显示颜色告诉您。

您所看到的是检查员的突出显示，告诉您其他突出显示的区域是＆＃34;保留＆＃34;因为div的样式类似于block。（这是黄色突出显示）

这意味着如果你给div一个邻居元素，它将位于下面 div。

如果您不希望它保留此空间，请使用display:inline-block;

查看此JsFiddle以获取display:inline-block;
的示例

Answer 2

.prikol_filter_div {
  margin: 0px;
  display: block;
  width: 220px!Important;
}

.prikol_filter_form {
  margin-bottom: 40px;
  width: 222px!Important;
  background-color: #c3150d;
  border-radius: 4px;
  position: relative;
  right: 17px;
}

Answer 3

它不是宽度问题，请看一下此链接

 [http://jsfiddle.net/vipinraunchhela/toos9k96/][1]

所有代码都在其中并且工作正常，如果您仍然遇到问题只需在div中添加一个属性溢出：隐藏; 这将隐藏所有数据它。如果你定义了一个div属性宽度：100％！important; ，这可能就是原因。如果您无法找出问题，可以使用 width：220px！important; 这不是一个好习惯，但暂时你可以使用它。

DIV标签保持100％宽度

3 个答案: