Question

我有一个页面，其中包含标题和菜单的标题。标题有一个边距，最小宽度等于菜单的宽度。当用户调整窗口大小时，当达到最小宽度时，右侧的边距消失。我想要的是将余量包含在标题的最小大小中。有没有人有任何想法？

HTML：

    <!DOCTYPE HTML>
    <html>
        <body>
            <div id="header">
                <ul id="title">
                    <li>
                        Title
                    </li>
                </ul>
                <ul id="menu">
                    <li>Home</li>
                    <li>Profile</li>
                    <li>Projects</li>
                    <li>News</li>
                    <li>Contact</li>
                    <li class="stretch"></li>
                </ul>
            </div>
        </body>
    </html>

CSS：

    html, body {
        margin: 0;
        border: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: Sans-Serif;
        font-size: 1em;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #header {
        background-color: orange;
        margin: 1em;
    }

    #title {
        font-size: 2em;
        font-weight: bold;
        background-color: red;
        display: inline-block;
    }

    #title li {
        position: relative;
    }

    #menu {
        width: 40em;
        background-color: blue;
        text-align: justify;
    }

    #menu li {
        display: inline;
    }

    #menu .stretch {
        display: inline-block;
        width: 100%;
    }

JS：

    $(function() {
        //SET MINIMUM WINDOW WIDTH TO MENU WIDTH
        var menu = $('#menu'),
            header = $('#header');

            header.css('min-width', menu.width());

        $(window).resize(function() {
        });
    });

的jsfiddle：

http://jsfiddle.net/L3u7nLgz/

Answer 1

我将你的.menu课程改为：

#menu {
    /*width: 40em;*/
    margin-right: 1em;
    background-color: blue;
    text-align: justify;
}

我不认为您想在此处指定宽度，并且为块级别ul元素添加边距将满足您对边距的需求。

http://jsfiddle.net/L3u7nLgz/1/

修改：您可以在.header上使用填充。

#header {
    background-color: orange;
    margin: 1em;
    padding-right: 1em;
}

http://jsfiddle.net/L3u7nLgz/2/

Answer 2

我通过在header元素中添加透明边框来解决这个问题。不完全解决上述问题，但我能找到最接近且最一致的解决方案。

用最小宽度保留边距

2 个答案: