HTML/CSS : Creating a centered div with a min-width

标签 html width css

我想在我的页面上有一个 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 上也能正常工作,有什么建议吗?

最佳答案

这不是一个完美的解决方案,但我已经解决了 IE6 不支持最小宽度的一些问题。

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

在这种情况下可能有用的另一个标签是溢出标签。

关于HTML/CSS : Creating a centered div with a min-width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/502196/

相关文章:

javascript - 以不同的分辨率显示不同数量的图像

html - 使用 CSS 使 DIV 像表格一样工作

javascript - HTML 中的垂直进度条?

android - Android webkit 浏览器中的宽度不正确

CSS - 水平列表的动态宽度(在列表的列表列表中)

jquery - Bootstrap 3 自动设置图片高度为div高度

javascript - 根据 slider 中的不同子项计算正确的 div 高度?

html - block 级文本标签;智能 CSS 边距

javascript - 单击按钮时添加或清除 localStorage 并在 html 中显示值

html - 如何使用[位置: fixed ]?设置dom节点的正确宽度