1

我正在尝试使现有网站具有响应性。当浏览器窗口达到一定大小时，包含 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>
4

2 回答 2

0

这是缺失的：

.main_navigation a {
    display: inline-block;
}
于 2013-01-31T12:21:47.813 回答
0

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

第一种方法是：

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

第二种方式是：

.main_navigation { overflow: hidden; white-space: nowrap; }
于 2015-02-18T11:13:18.200 回答