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

时间:2013-01-31 12:14:53

标签: css responsive-design

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

2 个答案:

答案 0 :(得分:0)

缺少这个:

.main_navigation a {
    display: inline-block;
}

答案 1 :(得分:0)

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

第一种方式是:

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

第二种方式是:

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