CSS导航栏问题

Question

我的标题左侧是标题，右侧是链接。 在较小的屏幕（例如平板电脑）上，链接不适合一行。 当使用float：left表示徽标，而float：right表示链接时，所有链接都将落入新行，这不是所需的行为。 对两个div使用display：table-cell时，链接区域background-color会扩展到链接区域之外，这也不是所需的行为。 我坚持认为css公式是更好的解决方案。 我需要保留徽标右侧的所有链接，但背景颜色不应超出链接区域。

这是一个有两个例子的小提琴，一个有很多链接（2行）和一个有较少链接（1行）： http://jsfiddle.net/ARauS/

#header {
    display: table;
    height: 25px;
    background-color: #e7e7e7;
    width: 100%;
}
#header #logo {
    #float:left;
    display: table-cell;
}
#header #links {
    #float:right;
    background-color: silver;
    text-align: right;
    display: table-cell;
    font-size: 0; /* remove whitespace between menu itens*/
}
#header #links a {
    font-family: Arial, sans-serif;
    font-size: 8pt;
    line-height: 18pt;
    text-decoration: none;
    color: #6a6a6a;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 1px;
    white-space: nowrap;
}
#header #links a:hover {
    text-decoration: underline;
}
#header #links a.personal {
    background-image: linear-gradient(to bottom, #fcfcfc, #e7e7e7);
}