HTML/CSS:创建具有最小宽度的居中 div

发布于 2024-07-12 06:20:14 字数 1059 浏览 3 评论 0原文

我想在我的页面上有一个 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 技术交流群。

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

发布评论

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

评论(3

想念有你 2024-07-19 06:20:14

它不是一个完美的解决方案,但我已经通过说解决了 IE6 缺乏对 min-width 支持的一些问题。

<style type="text/css">            
            .container-minwidth {
                min-width: 5em;

                width: auto !important;
                width: 500px; /* IE6 ignores the !important tag */

                /* would help for expanding content if it blows past 500px; */
                overflow:auto; 

                display: inline-block;
                border: 1px solid blue;
            }        
</style>

在这种情况下可能有帮助的另一个标记是溢出标记。

Its not a perfect solutions, but I've gotten around some issues of IE6 lack of support for min-width by saying.

<style type="text/css">            
            .container-minwidth {
                min-width: 5em;

                width: auto !important;
                width: 500px; /* IE6 ignores the !important tag */

                /* would help for expanding content if it blows past 500px; */
                overflow:auto; 

                display: inline-block;
                border: 1px solid blue;
            }        
</style>

The other tag that might help in this situation is the overflow tag.

静谧幽蓝 2024-07-19 06:20:14

实际上,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 the min-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.

豆芽 2024-07-19 06:20:14
<style type="text/css">            
        .container-minwidth {
            min-width: 5em;
            _width: 500px;
            white-space:nowrap;

            display: inline-block;
            *display:inline;
            *zoom:1;

            border: 1px solid blue;
        }        
</style>
<style type="text/css">            
        .container-minwidth {
            min-width: 5em;
            _width: 500px;
            white-space:nowrap;

            display: inline-block;
            *display:inline;
            *zoom:1;

            border: 1px solid blue;
        }        
</style>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文