HTML/CSS:创建具有最小宽度的居中 div
我想在我的页面上有一个 div
,它居中并具有一定的宽度,但如果内容需要,它会延伸到该宽度之外。 我正在使用以下方法执行此操作:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.container-center {
text-align: center;
}
.container-minwidth {
min-width: 5em;
display: inline-block;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="container-center">
<div class="container-minwidth">
a
</div>
</div>
</body>
</html>
这在 Firefox/Safari 上效果很好,但在 IE6 上则不然,因为 IE6 不理解 display: inline-block
。 关于如何在 IE6 上也能实现此功能,有什么建议吗?
I'd like to have on my page a div
which is centered and has a certain width, but which extends beyond that width if required by the content. I am doing this with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.container-center {
text-align: center;
}
.container-minwidth {
min-width: 5em;
display: inline-block;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="container-center">
<div class="container-minwidth">
a
</div>
</div>
</body>
</html>
This works great on Firefox/Safari, but not on IE6, which doesn't understand the display: inline-block
. Any advice on how to make this work on IE6 as well?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
它不是一个完美的解决方案,但我已经通过说解决了 IE6 缺乏对 min-width 支持的一些问题。
在这种情况下可能有帮助的另一个标记是溢出标记。
Its not a perfect solutions, but I've gotten around some issues of IE6 lack of support for min-width by saying.
The other tag that might help in this situation is the overflow tag.
实际上,Alessandro IE6 确实可以理解
display: inline-block
,但它不理解您的代码的是min-width
。 有许多技巧可以让它发挥作用,但我不会不推荐其中任何一个。 如果您打算使用其中任何一个,请确保将它们放入 IE6 特定的样式表中,这样它就不会干扰您其他更标准的投诉浏览器。Actually Alessandro IE6 does understand
display: inline-block
, what it doesn't understand about your code is themin-width
. There are many hacks to get this to work, but I wouldn't recommend any of them. If you are going to use any of them make sure to put them in an IE6 specific style sheet so that it doesn't interfere with your other more standard complaint browsers.