如何制作没有内容的DIV有宽度？

Question

如何制作没有内容的DIV有宽度？

我正在尝试为DIV添加宽度,但我似乎遇到了问题,因为它没有内容.这是我到目前为止的CSS和HTML,但它不起作用:

CSS

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

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

jco*_*ctx 145

div通常至少需要一个不间断的空间( )才能有宽度.

最小高度对我来说是最好的解决方案.我保持自己的高度自动,仍然让它在一个"空"div工作 (25认同)
使用"display:inline-block" (21认同)
如果没有漂浮,那些人都没有这样做:左. (3认同)
' ' 与 min-height 相比，这是一种很好的技术，因为它不强制高度。假设您的字体大小设置为 16 像素，内边距为 15 像素。在将文本添加到 div 之前和之后，您的 div 将保持相同的高度（假设它们都在一行上） (2认同)

Answer 2

ArK*_*ArK 87

使用padding,height或&nbsp 宽度生效为空div

编辑:

非零min-height也很有效

我更喜欢填充解决方案,任何大于0的填充都可以.这样你就不会在`div`中有一个奇怪的,可选的`` `. (5认同)
放一个  在你的空div.你也可以试试最小宽度. (2认同)

Answer 3

ril*_*ley 61

使用min-height: 1px; 一切至少具有1px的最小高度,因此没有额外的空间被填充或填充,或者被迫首先知道高度.

你的解决方案对我来说似乎是最干净的,但我一直试图在CSS规范中找到原因,我无法在任何地方找到它,我找到的最近的是`CSS 2.1,9.5 Floats`里面写着`注意:这意味着外部高度为零或外部高度为负的浮动不会缩短线框.但是它会讨论线框,即段落中的线条,而不是相邻的框架.谁更熟悉CSS规范？ (2认同)

Answer 4

Ber*_*rdV 27

使用CSS为div添加零宽度空间.div的内容不占用空间,但会强制div显示

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

Run Code Online (Sandbox Code Playgroud)

你先生,值得一个饼干.&NBSP; 没有为我工作,因为我必须从python模块生成div内容,并且必须正确地逃脱它.因此,thx man. (2认同)

Answer 5

小智 9

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

Answer 6

sim*_*eco 6

有不同的方法可以使空DIV具有float: left或float: 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;)

归档时间：	14 年，10 月前
查看次数：	128013 次
最近记录：	6 年，1 月前