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

它不能工作，因为你的 span 是一个inlinehtml 组件。所以它需要它的孩子的宽度。

您可以使用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 回答