Question

我是第一次潜入本网站的页脚，我需要在水平方向下放置3个电话号码的标题。

我有

HTML:

    <div class="phone-container">
    <div class="float-left">

    <ul>
    <li><h3>Phone West<h3></li>
    <li><a href="tel:888-888-8888">888-888-8888</a></li>
    </ul>
    </div>

    <ul>
    <li><h3>Phone Central<h3></li>
    <li><a href="tel:888-888-8888">888-888-8888</a></li>
    </ul>
    </div>

    <ul>
    <li><h3>Phone East<h3></li>
    <li><a href="tel:888-888-8888">888-888-8888</a></li>
    </ul>
    </div>
        </div>

    CSS:

    #phone-container{
        width: 100%;
    }
    #phone-left {
        float:left; 
        width: 33%;
    }
    #phone-center { 
        float:left;
        width: 33%;
    }
    #phone-right{
        float:left;
        width: 33%;
    }

如果有人知道我正在制作什么错误，或者更好的方式来安排这些错误，我会向我提供左侧垂直列出的所有项目。我很乐意帮助您！

Answer 1

有几点需要注意：

1。您的id代码未与HTML元素相关联。如下所示，它们需要链接，以使样式/定位生效。

2. *, :before, :after代码用于规范浏览器行为和删除默认添加的额外边距。（这允许3 x 33％的电话号码全部适合一行。

3. list-style-type: none;删除列表项目符号。如果您希望保留整个规则，则可以将其删除。

4。我也继续使用text-align: center;为您提供电话号码。

您可以在下面的浏览器中查看所有代码以及它的外观。

在任何情况下，如果您的链接仍需要位于底部，您可以选择将它们附加到文档的末尾，或position: fix;将其附加到视口的底部。

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} 

li {
  list-style-type: none;
}

#phone-container{
  width: 100%;
}

#phone-left {
  text-align: center;
  float:left; 
  width: 33.3%;
}
#phone-center { 
  text-align: center;
  float:left;
  width: 33.3%;
}
#phone-right{
  text-align: center;
  float:left;
  width: 33.3%;
}

 <div class="phone-container">
  <div>
    <ul id='phone-left'>
      <li><h3>Phone West<h3></li>
      <li><a href="tel:888-888-8888">888-888-8888</a></li>
    </ul>
    </div>

    <ul id='phone-center'>
      <li><h3>Phone Central<h3></li>
      <li><a href="tel:888-888-8888">888-888-8888</a></li>
    </ul>
    </div>

    <ul id='phone-right'>
      <li><h3>Phone East<h3></li>
      <li><a href="tel:888-888-8888">888-888-8888</a></li>
    </ul>
  </div>
</div>

Answer 2

我就是这样做的。但是我有漂浮物和清除它们的问题。

ul {
  list-style: none;
  display: inline-block;
  width: 33%;
  padding: 0;
  text-align: center;
}

<div class="phone-container">
  <ul>
    <li><h3>Phone West<h3></li>     
    <li><a href="tel:888-888-8888">888-888-8888</a></li>
  </ul>
  <ul>
    <li><h3>Phone Central<h3></li>     
    <li><a href="tel:888-888-8888">888-888-8888</a></li>
  </ul>
  <ul>
    <li><h3>Phone East<h3></li>
    <li><a href="tel:888-888-8888">888-888-8888</a></li>
  </ul>
</div>

你也可以把

.phone-container{
    font-size: 0;
}

但是，您需要在h3和锚点上添加字体大小。一旦你这样做，你就可以设置

ul{
    width:33.3333333%;
}

它们应该均匀分开。

此外，您的HTML无效 - 您有未公开的div。

Answer 3

这里发生了一些事情。首先，您要为ID null设置样式，而不是像您在HTML中编写的类一样，因此您的父元素未应用#phone-container规则。

其次，您的HTML中不包含width: 100%，#phone-left和#phone-center ID。由于这些都有相同的规则，我会将它们全部归为一类，#phone-right。

查看Codepen上的演示。

<强> HTML：

.phone

<强> CSS：

<div class="phone-container">
    <div class="phone">
      <ul>
        <li><h3>Phone West<h3></li>
        <li><a href="tel:888-888-8888">888-888-8888</a></li>
      </ul>
    </div>

    <div class="phone">
      <ul>
        <li><h3>Phone Central<h3></li>
        <li><a href="tel:888-888-8888">888-888-8888</a></li>
      </ul>
    </div>

    <div class="phone">
      <ul>
        <li><h3>Phone East<h3></li>
        <li><a href="tel:888-888-8888">888-888-8888</a></li>
      </ul>  
    </div>
</div>

Answer 4

这是一个修复程序 -

HTML -

<div class="phone-container">
    <div class="float-left">
        <ul>
            <li><h3>Phone West<h3></li>
            <li><a href="tel:888-888-8888">888-888-8888</a></li>
        </ul>
        <ul>
            <li><h3>Phone West<h3></li>
            <li><a href="tel:888-888-8888">888-888-8888</a></li>
        </ul>
        <ul>
            <li><h3>Phone West<h3></li>
            <li><a href="tel:888-888-8888">888-888-8888</a></li>
        </ul>
    </div>
</div>

CSS -

* {
  margin: 0;
  padding: 0;
}

#phone-container, .float-left {
  width: 100%;
  float: left;
}
#phone-container ul, .float-left ul {
  float: left;
  width: 33%;
  display: block;
  text-align: center;
}
#phone-container ul li, .float-left ul li {
  display: inline-block;
}

将3个无序列表放在水平行

4 个答案:

有几点需要注意：