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页脚 - 在菜单下格式化文本

回答

相关问题