1

我正在为一个网站构建一个标题，其中包含float:right;将用户信息放置在屏幕右侧的位置。这很好用，除非用户使浏览器变小。用户信息然后跳到下一行，女巫很好，但标题不会随之扩展。

我正在尝试找出一种解决方案，使标题在不使用媒体查询的情况下向下扩展。使用媒体查询很好，但让它自然扩展会好得多。

我已经整理了一个jsFiddel作为示例，以防我在解释我的问题时做得很糟糕。

我已经尝试了一些方法来解决这个问题。

我尝试float:left;在左角的徽标上放置一个，但这会使标题上的背景消失。然后在overflow:auto;标题上放置 a 时会出现一个滚动条。

我也尝试过使用媒体查询器手动扩展标题，但必须有更好、更清洁的方法。

任何帮助将非常感激。

header{
    background-color: #23234c;
    padding: .3em 0;        
}

header li{
    display: inline-block;
    margin:0 .5em;
    font: bold 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.topLinks{
    float: right;
}
4

1 回答 1

2

尝试添加以下标题样式：

header {
    clear: both;
    overflow: hidden;
}

这将强制标题保持大于其浮动内容。

于 2013-07-15T17:30:17.913 回答