HTML + CSS頁腳 - 在菜單下格式化文本

嘗試獲取「菜單」下方的文本（如圖2所示）。什麼是「正確」的方式來做到這一點？我一直玩弄meniubot和文本框邊距，填充，顯示：塊，顯示：內聯塊，浮動：左，清除：兩者，但我不能讓它正確對齊，如第二張圖片所示。HTML + CSS頁腳 - 在菜單下格式化文本

任何想法？也許我應該爲每個文本框使用不同的類並設置自定義邊距？

我有什麼：

什麼它看起來像：

HTML：

<div id="footer"> 
     <div class="main"> 

      <div class="logo2"> 
       <a href="#"><img src="logo2small.png"></a> 
      </div> 

      <div class="meniubot"> 
       <a href="#1">naujienos</a> 
       <a href="#2">krepšinio vadovas</a> 
       <a href="#3">treniruotė</a> 
       <a href="#">įdomybės</a> 
       <a href="#">galerija</a> 
       <a href="#">apie mus</a> 
      </div> 

      <div class="ytfb2"> 
       <a href="#"><img src="yttopedit.png"></a> 
       <a href="#"><img src="ftopedit.png"></a> 
      </div> 

      <div class="textbox"> 
       Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> Designed for basketball 

      </div> 
      <div class="textbox"> 
       Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> 
      </div> 
      <div class="textbox"> 
       Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> Desiasketball coach 
      </div> 
      <div class="textbox"> 
       Wondering <br> how we can he <br> Ip your game <br> Basketball HQ 
      </div> 



     </div> 
    </div> 
    </body> 
</html>

CSS：

#footer{ 
     bottom:0px; 
     background-image:url(meniuBG.jpg); 
     height:252px; 
     margin-top:220px; 
    } 

    .logo2{ 
     float:left; 
     margin-top:35px; 

    } 

    .ytfb2{ 

     clear:both; 


    } 

    .ytfb2 a{ 
     float:left; 
     margin-top:40px; 
     margin-right:20px; 
    } 

    .meniubot{ 
     float:left; 
     margin-left:15px; 
     margin-top:40px; 

    } 

    .meniubot a{ 
     text-align: center; 

     float:left; 
     text-decoration: none; 
     font-style:italic; 
     color:rgb(193,193,193); 
     padding:0px 35px 0px 35px; 
     text-transform:uppercase; 
    } 

    .textbox { 
     float:left; 
     margin-left:50px; 
     margin-top:-20px; 
     color:rgb(193,193,193); 
     font-size:14; 

    }

來源

2014-06-21 GytisK

你應該使用列表，而不是
，這將完美的工作。 –

使用列表可以幫助你。

<ul class="meniubot"> 
    <li> 
    <a href="#1">Link</a> 
    <div>text...</div> 
    </li> 
</ul>

見琴：http://jsfiddle.net/ECd6J/

來源

2014-06-21 08:24:14

格式化一切後，設置邊距等我意識到..菜單項卡住的文字，我怎麼能讓他們之間的空間？就像第二張圖片 – GytisK

Nevermind - 文本框上的頁邊距。謝謝反正:) – GytisK

是的。 * margin-bottom *和* display：block; * 也可以。 –

替換類似下面的所有文本框：

<html> 
    <div class="container"> 
     <p>Wondering </p> 
     <ul class="textbox"> 
      <li>How we can he</li> 
      <li>Ip your game</li> 
      <li>Basketball HQ</li> 
    </ul> 
    </div> 
</html>

並更改CSS像下面這樣：

.container{ 
    width:200px; 
} 

.container p{ 
    margin-left:40px; 
    font-weight:bold; 
} 

.textbox li{ 
    list-style-type:none; 
}

來源

2014-06-21 08:20:10

我不想進入最深的編碼實踐。
使用position:relative; display: block;可以隨意播放任何內容。
它不會影響任何其他標籤。

來源

2014-06-21 08:46:17

HTML + CSS頁腳 - 在菜單下格式化文本

回答

相關問題