0

ナビゲーションの一部を左側に、別の部分を右側に配置するトップ ナビゲーションがあります。私はしばらく座っていて、それを理解していません。ここで機能しない理由がわかりません。私のコードは次のとおりです。

<div id="overhead">
    <div id="overheadText">

    <!-- Home -->
    <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/List/diverse/home_mo.png',1)"><img src="Images/List/diverse/home.png" alt="Home" name="Home" width="65" height="30"   border="0" id="Home" /></a>    
    <!-- Request Streams -->
    <a href="RequestStream.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('RequestStream','','Images/List/diverse/requestStream_mo.png',1)"><img src="Images/List/diverse/requestStream.png" alt=    "RequestStream" name="RequestStream" width="113" height="30" border="0" id="RequestStream" /></a>
    <!-- About&Contact -->
    <a href="AboutContact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutContact','','Images/List/diverse/AboutContact_mo.png',1)"><img src="Images/List/diverse/AboutContact.png" alt="About&amp;Contact" name="AboutContact" width="113" height="30" border="0" id="AboutContact" /></a>
    <!-- Play LoL -->
    <a href="http://www.leagueoflegends.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lol','','Images/List/diverse/Lol_mo.png',1)"><img src="Images/List/diverse/Lol.png" alt="Play LeagueofLegends" name="Lol" width="160" height="30" border="0" id="Lol" /></a>

    <!-- All links following should be rightsided (But wont work) -->

    <span style="text-align:right">
    <!-- Facebook -->
    <a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','Images/List/diverse/fb_mo.png',1)"><img src="Images/List/diverse/fb.png" alt="Facebook" name="FB" width="31" height="30" border="0" id="FB" /></a>
    <!-- Twitter -->
    <a href="http://www.twitter.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','Images/List/diverse/tw_mo.png',1)"><img src="Images/List/diverse/tw.png" alt="Twitter" name="Twitter" width="31" height="30" border="0" id="Twitter" /></a>
    </span>

    </div>
</div>

何か案は？？

4

3 に答える 3

5

inlineスパンがhtml コンポーネントであるため、機能しません。そのため、子の幅が必要です。

float: right;スタイルを使用できます。それはよりうまくいくはずです。

于 2013-01-04T15:56:16.340 に答える
1

これはあなたの問題を解決します

<div id="overhead">
    <div id="overheadText">
    <div style="float:left">
    <!-- Home -->
    <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/List/diverse/home_mo.png',1)"><img src="Images/List/diverse/home.png" alt="Home" name="Home" width="65" height="30"   border="0" id="Home" /></a>    
    <!-- Request Streams -->
    <a href="RequestStream.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('RequestStream','','Images/List/diverse/requestStream_mo.png',1)"><img src="Images/List/diverse/requestStream.png" alt=    "RequestStream" name="RequestStream" width="113" height="30" border="0" id="RequestStream" /></a>
    <!-- About&Contact -->
    <a href="AboutContact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutContact','','Images/List/diverse/AboutContact_mo.png',1)"><img src="Images/List/diverse/AboutContact.png" alt="About&amp;Contact" name="AboutContact" width="113" height="30" border="0" id="AboutContact" /></a>
    <!-- Play LoL -->
    <a href="http://www.leagueoflegends.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lol','','Images/List/diverse/Lol_mo.png',1)"><img src="Images/List/diverse/Lol.png" alt="Play LeagueofLegends" name="Lol" width="160" height="30" border="0" id="Lol" /></a>
    </div>
    <!-- All links following should be rightsided (But wont work) -->

    <div style="float:right">
    <!-- Facebook -->
    <a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','Images/List/diverse/fb_mo.png',1)"><img src="Images/List/diverse/fb.png" alt="Facebook" name="FB" width="31" height="30" border="0" id="FB" /></a>
    <!-- Twitter -->
    <a href="http://www.twitter.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','Images/List/diverse/tw_mo.png',1)"><img src="Images/List/diverse/tw.png" alt="Twitter" name="Twitter" width="31" height="30" border="0" id="Twitter" /></a>
    </div>

    </div>
</div>
于 2013-01-04T15:59:22.557 に答える
1

それらをDIVに入れて、左側/右側に浮かせてみてください:

<div style="float:left;"> <!-- Left part -->

    <!-- Home -->
    <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/List/diverse/home_mo.png',1)"><img src="Images/List/diverse/home.png" alt="Home" name="Home" width="65" height="30"   border="0" id="Home" /></a>    
    <!-- Request Streams -->
    <a href="RequestStream.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('RequestStream','','Images/List/diverse/requestStream_mo.png',1)"><img src="Images/List/diverse/requestStream.png" alt=    "RequestStream" name="RequestStream" width="113" height="30" border="0" id="RequestStream" /></a>
    <!-- About&Contact -->
    <a href="AboutContact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutContact','','Images/List/diverse/AboutContact_mo.png',1)"><img src="Images/List/diverse/AboutContact.png" alt="About&amp;Contact" name="AboutContact" width="113" height="30" border="0" id="AboutContact" /></a>
    <!-- Play LoL -->
    <a href="http://www.leagueoflegends.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lol','','Images/List/diverse/Lol_mo.png',1)"><img src="Images/List/diverse/Lol.png" alt="Play LeagueofLegends" name="Lol" width="160" height="30" border="0" id="Lol" /></a>

</div>
    <!-- All links following should be rightsided (But wont work) -->

<div style="float:right;"> <!-- Right part -->

    <span style="text-align:right;">
    <!-- Facebook -->
    <a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','Images/List/diverse/fb_mo.png',1)"><img src="Images/List/diverse/fb.png" alt="Facebook" name="FB" width="31" height="30" border="0" id="FB" /></a>
    <!-- Twitter -->
    <a href="http://www.twitter.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','Images/List/diverse/tw_mo.png',1)"><img src="Images/List/diverse/tw.png" alt="Twitter" name="Twitter" width="31" height="30" border="0" id="Twitter" /></a>
    </span>

</div>

詳細はこちら: http://www.w3schools.com/css/css_float.asp

于 2013-01-04T16:00:35.220 に答える