Question

我不知道如何解决这个问题。

一切看起来都很好，减去了左侧的图像。但我的主要问题是，当我缩小浏览器窗口时，user name | Log off会滑到一边。我真的想让它尽可能流畅。

我需要更改才能获得此行为？

<html>
<body>
<style>
.title-wrapper {
    padding-top: 20px; 
    margin-left:auto;
    margin-right:auto;
    width: 98%;
    display:block;
}


#title-area {
    background: url('image.png')center center no-repeat;
    float: left;
    clear: none;
    width: 270px;
    height: 100px;
}

#menuTitleThin{
    position:absolute;
    padding-top:10px;
    margin-left:15px;
    margin-right:10px;
    font-size:20px;
    border-bottom: 3px solid #d95936;
    width:82%;


}

#menuLoginInfo {
    float:right;
    font-size:20px;
    position:relative;
}
#menuLoginInfo a {
    text-decoration: none;
}


/* menu
----------------------------------------------------------*/
    ul#menu {
        font-size: 1.0em;
        font-weight: 600;
        margin: 50px 0 5px;
        padding: 0;
        text-align: left;
    }

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

    ul#menu li a {
        background: none;
        color: #999;
        text-decoration: none;
    }

    ul#menu li a:hover {
        color: #333;
        text-decoration: none;
    }

</style>
        <div class="title-wrapper">
            <div id="title-area">
                <span id="title"/>
            </div>
            <span id="menuTitleThin">Services - <b>Title</b> 
                <span id="menuLoginInfo"><span>user name</span> | <span>Log off</span></span>
            </span>

                <span>
                    <ul id="menu">
                        <li>test</li>
                        <li>test 2</li>
                        <li>test 3</li>
                    </ul>
                </span>
        </div>
</body>
</html>

Answer 1

您的问题如下：

<span id="menuTitleThin">Services - <b>Title</b>

使用CSS规则

position: absolute;

您无法将绝对定位设置为内嵌元素。

要解决此问题，只需添加以下规则：

#menuTitleThin{
position:absolute;
padding-top:10px;
margin-left:15px;
margin-right:10px;
font-size:20px;
border-bottom: 3px solid #d95936;
width:82%;

/*******Add this rule********/
display:block;

}

将显示模式更改为阻止将修复它。

JSFiddle

Answer 2

这是流体设置中浮动元素问题的一个很好的例子。

您可以使用calc()设置#menuTitleThin的宽度，这样可以让菜单保持流畅，并为左侧的#title-area留出空间。然后你只需要适当地浮动#menuTitleThin以允许平滑的重新调整大小：

<强> Working Example

#title-area {
    background: red url('image.png')center center no-repeat; /* added red for demo only */
    float: left;
    clear: none;
    width: 270px;
    height: 100px;
}
#menuTitleThin {
    float: left; /* change here */
    padding-top:10px;
    margin-left:15px;
    margin-right:10px;
    font-size:20px;
    border-bottom: 3px solid #d95936;
    width: calc(100% - 295px); /* change here */
}

Answer 3

你只是想做一些这样的事情：

http://jsfiddle.net/Riskbreaker/ccX5u/7/

.title-wrapper {position: relative; /*NEW*/}
#menuTitleThin {right: 0; /*NEW*/}

位置：相对根据您的放置方式控制绝对定位...在这种情况下，我添加到右侧（右侧：0）。我只修理了顶部菜单，我认为这就是你要求的地方。

流体布局 - 调整窗口大小时文本从屏幕上滑落

3 个答案:

JSFiddle