Question

我有一个顶部导航，我希望导航的一部分位于左侧，另一部分位于右侧。我现在已经坐了一会儿而且没有得到它。我不明白为什么它不起作用是我的代码：

<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>

任何想法??

Answer 1

它无法工作，因为您的span是一个inline html组件。所以它需要孩子的宽度。

您可以使用float: right;样式。它应该更好。

Answer 2

这将解决您的问题

<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>

Answer 3

尝试将它们放入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

跨度不能正常工作

3 个答案: