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

【问题标题】：HTML+CSS Footer - formatting text beneath menuHTML+CSS 页脚 - 格式化菜单下方的文本
【发布时间】：2017-07-31 21:08:09
【问题描述】：

试图获取“菜单”下方的文本（如图 2 所示）。这样做的“正确”方法是什么？我一直在玩 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;

    }

【问题讨论】：

你应该使用 list 而不是
这将完美地工作。

标签： html css alignment css-tables

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

见小提琴：http://jsfiddle.net/ECd6J/

【讨论】：

在格式化所有内容、设置边距等之后，我意识到.. 菜单项粘在文本上，如何在它们之间留出空格？就像在第二张图片中
没关系 - 文本框上的边距顶部。无论如何谢谢:)
是的。上的 margin-bottom 和 display: block; 也可以。

【解决方案3】：

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

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

【讨论】：