如何使没有内容的div有宽度？

110

我正在尝试为加上宽度div，但由于没有内容，因此我似乎遇到了问题。

这是到目前为止我拥有的CSS和HTML，但无法正常工作：

的CSS

body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}

的HTML

<body>
  <div id="test">
    <ul>
      <li>
        <div class="test1">width1</div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
    </ul>
 </div>

— 每天运行
source

158

div通常至少需要一个不间断的空格（＆nbsp;）才能具有宽度。

— jcomeau_ictx
source

28

使用“ display：inline-block”

— 卢卡斯

如果我使用“”代替＆nbsp;是一个很好的解决方案它不起作用，但是为什么呢？

— 2013年

1

'＆nbsp;' 与最小高度相反，它是一种好技术，因为它不会强制高度。假设您的字体大小设置为16像素，填充为15像素。在将文本添加到div之前和之后，您的div都将保持相同的高度（假设全部都在一行上）

— eroedig 2015年

对我来说，放置空格是行不通的！宽度为100px且在＆nbsp;之内的div 看起来不像是带有Flex内联元素的div中的100px

— Micky

89

无论哪种用途padding，height或&nbsp 用于宽度采取与空化效应div

编辑：

非零min-height也很棒

— 方舟
source

5

我更喜欢填充解决方案，任何大于0的填充都可以使用。这样一来，您就不会有一个奇怪的，可选 的内容div。

— Brian Duncan 2013年

1

请注意：对于填充解决方案，您需要同时提供左/右和顶部/底部填充才能起作用。

— Govind Rai

62

“使用min-height: 1px; 一切”的最小高度至少为1px，因此不会因nbsp或padding或被迫首先知道高度而占用多余的空间。

— 赖利
source

2

您的解决方案对我来说似乎是最干净的，但是我一直在尝试在CSS规范中找到这样做的原因，但我找不到它的地方，我发现的最接近的地方是CSS 2.1, 9.5 Floats它说的地方Note: this means that floats with zero outer height or negative outer height do not shorten line boxes.，但是它谈到的是线框，即线在段落中，但不涉及相邻的框。有人更熟悉CSS规范吗？

— Jaime Hablutzel 2014年

这对我来说效果最好。除了＆nbsp;，我还在这里尝试了其他大多数建议。

— ayahuasca 2015年

28

使用CSS为您的div添加一个零宽度的空间。div的内容不会占用空间，但会强制div显示

.test1::before{
   content: "\200B";
}

— 伯纳德五世
source

9

它具有宽度，但没有内容或高度。将高度属性添加到类test1。

— 麦可
source

7

有多种方法可以使用float: left或来制作空DIVfloat: right可见。

这里介绍了我所知道的：

设置width（或min-width）与height（或min-height）
或设置 padding-top
或设置 padding-bottom
或设置 border-top
或设置 border-bottom
或使用伪元素：::before或::after与：
- {content: "\200B";}
- 要么 {content: "."; visibility: hidden;}
或放入 DIV中（有时会带来意想不到的效果，例如与结合使用text-decoration: underline;）

— Simhumileco
source

1

尝试添加display:block;到您的测试1

— DevenX
source

1

回答为时已晚，但仍然如此。

使用CSS时，要对div（无内容）进行样式设置，必须将min-height属性设置为“ n” px才能使div可见（适用于webkit和chrome，但不确定此技巧是否适用于IE6和降低）

码：

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}

<div class="shape-round"></div>

展开摘要

— 巴斯卡·普拉曼尼克（Bhaskar Pramanik）
source

0

 可能会成功在XSL文档中工作

— 丹尼尔·福雷斯特
source

0

我遇到过同样的问题。我希望通过按下按钮来显示图标，但不要移动并滑动环境，就像灯泡一样：打开和关闭，出现并消失，所以我需要制作一个固定大小的空div。

width: 13px;
min-width: 13px;

为我做了把戏

— 死炸
source

-1

您将添加到此DIV的CSS中position: relative，它将完成所有工作。

— 克尔兹斯托夫
source