1

既存のウェブサイトをレスポンシブにしようとしています。ブラウザー ウィンドウが特定のサイズになると、含まれている div 内のリンクが div の外に流れ始めるという問題があります。「.main_navigation a {white-space:nowrap;}」を削除しても問題ありませんが、新しい行に進むのを止めるためにこれが必要です。助言がありますか？

 .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

2 つの異なる方法を使用して、たとえばhttp://jsfiddle.net/でテストできます。

最初の方法は次のとおりです。

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

2番目の方法は次のとおりです。

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

これがありません：

.main_navigation a {
    display: inline-block;
}
于 2013-01-31T12:21:47.813 に答える