Question

尝试将文字放在＆＃34;菜单＆＃34; （如图2所示）。什么是正确的＆＃39;这样做的方法？我一直在玩meniubot和文本框边距，填充，显示：块，显示：内联块，浮动：左，清除：两者但我无法正确对齐，如第二张图片所示。

有什么想法吗？也许我应该为每个文本框使用不同的类并设置自定义边距？

我有什么：

它看起来像什么：

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;

    }

Answer 1

我不想进行最深入的编码练习将position:relative; display: block;用于您想要播放的任何内容它不会影响任何其他标签。

Answer 2

替换所有文本框，如下所示：

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

Answer 3

使用列表可能会对您有所帮助。

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

请参阅小提琴：http://jsfiddle.net/ECd6J/

HTML + CSS页脚 - 格式化菜单下的文本

3 个答案: