当前位置： 文江博客话题详情

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

发布于 2024-10-02 00:01:26 字数 924 浏览 6 评论 0原文

我正在尝试向 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>
原文

I am trying to add a width to a div, but I seem to be running into a problem because it has no content.

Here is the CSS and HTML I have so far, but it is not working:

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（15）

望她远 2024-10-09 00:01:26

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

a div usually needs at least a non-breaking space ( ) in order to have a width.

回复 原文
意犹 2024-10-09 00:01:26

使用 padding 、 height 或   使宽度在空 div 时生效

编辑：

非零 min-height 也很好用

Either use padding , height or   for width to take effect with empty div

EDIT:

Non zero min-height also works great

回复 原文
口干舌燥 2024-10-09 00:01:26

使用 min-height: 1px; 所有东西的 min-height 至少为 1px，这样 nbsp 或 padding 就不会占用额外的空间，或者被迫先知道高度。

Use min-height: 1px; Everything has at least min-height of 1px so no extra space is taken up with nbsp or padding, or being forced to know the height first.

回复 原文
过潦 2024-10-09 00:01:26

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

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

Use CSS to add a zero-width-space to your div. The content of the div will take no room but will force the div to display

.test1::before{
   content: "\200B";
}
回复 原文
￠好甜 2024-10-09 00:01:26

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

It has width but no content or height. Add a height attribute to the class test1.

回复 原文
随梦而飞# 2024-10-09 00:01:26

有不同的方法可以使 float: left 或 float: right 的空 DIV 可见。

这里介绍了我所知道的：

  • 设置 width（或 min-width）和 height （或 min-height） )
  • 或设置 padding-top
  • 或设置 padding-bottom
  • 或设置 border-top
  • 或设置 border-bottom
  • 或使用伪元素：::before 或 ::after 与：
    • {内容：“\200B”;}
    • 或{内容：“。”;可见性：隐藏；}
  • 或将 放入DIV中（这有时会带来意想不到的效果，例如与text-decoration: underline;结合使用）

There are different methods to make the empty DIV with float: left or float: right visible.

Here presents the ones I know:

  • set width(or min-width) with height (or min-height)
  • or set padding-top
  • or set padding-bottom
  • or set border-top
  • or set border-bottom
  • or use pseudo-elements: ::before or ::after with:
    • {content: "\200B";}
    • or {content: "."; visibility: hidden;}
  • or put   inside DIV (this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;)
回复 原文
呢古 2024-10-09 00:01:26

虽然来不及回答，但还是这样。

使用 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>

Too late to answer, but nevertheless.

While using CSS, to style the div (content-less), the min-height property must be set to "n"px to make the div visible (works with webkits and chrome, while not sure if this trick will work on IE6 and lower)

Code:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}
<div class="shape-round"></div>

回复 原文
谈下烟灰 2024-10-09 00:01:26

尝试将 display:block; 添加到您的 test1

Try to add display:block; to your test1

回复 原文
梦途 2024-10-09 00:01:26

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

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

对我有用

I had the same issue.
I wanted icons to appear by pressing the button but without any movement and sliding the enviroment, just like bulb: on and off, appeared and dissapeared, so I needed to make an empty div with fixed sizes.

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

did the trick for me

回复 原文
羁客 2024-10-09 00:01:26

通过为元素定义最小宽度/高度，您可以在没有内容的情况下渲染它：

<div class="your-element"><div>

.your-element {
  min-width: 100px;
  min-height: 20px;

  // This is only for observing the element space
  background: blue;
}

By defining min width/hright for your element you can render it without content:

<div class="your-element"><div>

.your-element {
  min-width: 100px;
  min-height: 20px;

  // This is only for observing the element space
  background: blue;
}
回复 原文
轻拂→两袖风尘 2024-10-09 00:01:26

也许是最优雅的：

display: inline-block;

（信用：@Luccas 建议在最佳答案下发表评论）

Perhaps the most elegant:

display: inline-block;

(credit: @Luccas suggestion in a comment under the top answer)

回复 原文
岁月如刀 2024-10-09 00:01:26

  可能可以解决问题；在 XSL 文档中工作

  may do the trick; works in XSL docs

回复 原文
雨落星ぅ辰 2024-10-09 00:01:26

如果将display:设置为inline-block、block、flex、. ..，在没有内容的元素上，然后

要让min-width在没有内容的标签上生效，只需要为顶部或机器人应用填充。

要使min-height在没有内容的标签上生效，您只需为左或应用内边距。

这个示例展示了它；在这里，我只坐了 padding-left 以使 min-width 在空的 span 标签上生效

If you set display: to inline-block, block, flex, ..., on the element with no content, then

For min-width to take effect on a tag with no content, you only need to apply padding for either top or bot.

For min-height to take effect on a tag with no content, you only need to apply padding for left or right.

This example showcases it; here I only sat the padding-left for the min-width to take effect on an empty span tag

回复 原文
眼泪淡了忧伤 2024-10-09 00:01:26

您可以使用 position:absolute 直接指定宽度和高度，而不需要任何内容​​。

如果您正在考虑使用单个 div，那么可以轻松做到这一点。

You can use position:absolute to assign width and height directly, without any content.

that can easily do it if you are considering a single div.

回复 原文
柠檬色的秋千 2024-10-09 00:01:26

同样的问题，我的初始 css 是 width: 5px，将其更新为 min-width: 5px 使无内容的 div 出现！
不需要额外的 height/min-height/padding/display 属性

Same problem, my initial css is width: 5px, updating it to min-width: 5px made the contentless div appear!
No need for extra height/min-height/padding/display properties

回复 原文
~没有更多了~

关于作者

桃气十足

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文