Question

我正在尝试使现有网站响应。我有一个问题，当浏览器窗口达到一定的大小时，包含div中的链接开始流到div之外。如果我删除“.main_navigation a {white-space：nowrap;}”就可以了，但是我需要这个来阻止owrd继续新行。有什么建议吗？

 .search {width:260px;height:30px;padding:10px 0 0 10px;text-align:left;float:left;}
    .main_navigation {width:700px;min-height:20px;padding:10px 10px 10px 0;text-align:right;float:left;}.main_navigation a {font:10px/20px Tahoma, sans-serif;padding:4px 8px;text-decoration:none;color:#999999;border-radius:5px;-moz-border-radius:5px;}.main_navigation a:hover {color:#eeeeee;background:#999999;}

@media screen and (max-width: 580px){
    .c_main {border:2px solid blue;max-width:580px}
    .search_button {padding:3px 1px;}
    .main_navigation {width:50%;}   
}

@media screen and (max-width: 980px){
    .search {width:28%;}
    .main_navigation {width:70%;padding-left:0;padding-right:0;margin-right:0;float:right;} 
    .main_navigation a {white-space:nowrap;}
}
    <div class="search">
            <form method="get"><input id="txtQuickSearch" name="txtQuickSearch" type="text" value="search"  /><input type="submit" value="search" class="search_button" /></form>
    </div>
    <a HREF="#"><span CLASS="icon-menu-2"></span></a>
    <div class="main_navigation">
            <a href="" title="Home">Home</a><a href="" >About</a><a href="">Basket</a><a href="">Contact</a><a href="">new page</a>

    <a href="" target="_blank">test external links</a><a href="" target="_blank">another link</a>

    <a href="">My Account</a><a href="">Sign In</a>
    </div>

Answer 1

缺少这个：

.main_navigation a {
    display: inline-block;
}

Answer 2

您可以使用两种不同的方式，例如在http://jsfiddle.net/上进行测试。

第一种方式是：

.main_navigation a { display: block; float: left; }

第二种方式是：

.main_navigation { overflow: hidden; white-space: nowrap; }

css响应式设计 - 在div之外流动的链接

2 个答案: