css - 防止 DIVS 移动

Question

我试图弄清楚当窗口调整大小较小时如何防止 DIV 内的标签向下移动。

我希望链接始终保持正确的大小，100% 的窗口。

我希望标签都保持水平并且在浏览器窗口较小时不移动。

这是我的链接：http: //jsfiddle.net/B9WBF/

<div class="topnav">


<a href="contact.htm">LINK 1</a>
<a href="contact.htm">LINK 2</a>
<a href="contact.htm">LINK 3</a>
<a href="contact.htm">LINK 4</a>
<a href="contact.htm">LINK 5</a>


<div id="logo" href="home.htm"></div>

</div>

Answer 1

如果我理解正确，那么即使用户调整窗口大小，您似乎也希望将parent div和保持child div在一行中。如果是这样，那么不要给子 div 填充，而是以百分比形式给出宽度值。

CSS

/* Below are the edited values in your code */
#logo {
    width: 20%;  /* width: 317px; */
}

.topnav a {
    width: 16%;  /* Calculation should be correct */
   /*padding-left: 22px;
   padding-right:22px;*/
}

工作小提琴