Html 在水平行中放置3个无序列表

我第一次进入这个网站的页脚，我需要在下面水平放置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%;
    }

HTML：

电话西部



电话中心



电话东


CSS:
#电话容器{
宽度：100%；
}
#电话左边{
浮动：左；
宽度：33%；
}
#电话中心{
浮动：左；
宽度：33%；
}
#电话对吗{
浮动：左；
宽度：33%；
}

这是给我所有的项目垂直向左侧列出，如果有人知道我犯了什么错误或更好的方式来安排这些我希望得到帮助

有几点需要注意： 1。您的

id

标记未链接到HTML元素。它们需要链接，如下所示，以使样式/定位生效

2.该

*，：before，：after

代码用于规范浏览器行为和删除默认添加的额外边距。（这使得3 x 33%的电话号码可以全部放在一行中

3.

列表样式类型：无；

删除列表项目符号。如果您希望保留整个规则，则可以删除它

4。我还用

文本对齐：居中；

为您将电话号码居中

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

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

*，：之前，：之后{
框大小：边框框；
保证金：0；
填充：0；
} 
李{
列表样式类型：无；
}
#电话容器{
宽度：100%；
}
#电话左边{
文本对齐：居中；
浮动：左；
宽度：33.3%；
}
#电话中心{
文本对齐：居中；
浮动：左；
宽度：33.3%；
}
#电话对吗{
文本对齐：居中；
浮动：左；
宽度：33.3%；
}

电话西部



电话中心



电话东

有几点需要注意： 1。您的

id

标记未链接到HTML元素。需要链接它们，如下所示，样式/定位才能生效

2.该

*，：before，：after

代码用于规范浏览器行为，并用于删除默认情况下添加的额外边距。（这允许3 x 33%的电话号码都放在一行中。）

3.

列表样式类型：无；

删除列表项目符号。如果您希望保留整个规则，则可以删除它

4。我还用

文本对齐：居中；

为您将电话号码居中

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

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

*，：之前，：之后{
框大小：边框框；
保证金：0；
填充：0；
} 
李{
列表样式类型：无；
}
#电话容器{
宽度：100%；
}
#电话左边{
文本对齐：居中；
浮动：左；
宽度：33.3%；
}
#电话中心{
文本对齐：居中；
浮动：左；
宽度：33.3%；
}
#电话对吗{
文本对齐：居中；
浮动：左；
宽度：33.3%；
}

电话西部



电话中心



电话东

我会这样做。但我对浮动和清除浮动有问题

ul{
列表样式：无；
显示：内联块；
宽度：33%；
填充：0；
文本对齐：居中；
}

打电话到西部



电话中心



电话东

我会这样做。但我对浮动和清除浮动有问题

ul{
列表样式：无；
显示：内联块；
宽度：33%；
填充：0；
文本对齐：居中；
}

打电话到西部



电话中心



电话东

这里有几件事。首先，您正在设置ID

#电话容器的样式，而不是像您在HTML中编写的类，因此您的父元素没有得到应用于它的
宽度：100%
规则

其次，HTML中不包括
#phone left
、
#phone center
和
#phone right
ID。由于这些ID都有相同的规则，我将它们都设为一个类，
.phone

查看上的演示

HTML:

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

body{ 
  margin: 0; 
  padding: 0; 
}

.phone-container {
  width: 100%;
}

.phone {
  float: left;
  width: 33.3%;
}

这里发生了一些事情。首先，您正在设置ID
#phone container
的样式，而不是您在HTML中编写的类，因此您的父元素没有应用
宽度：100%
规则

其次，HTML中不包括
#phone left
、
#phone center
和
#phone right
ID。由于这些ID都有相同的规则，我将它们都设为一个类，
.phone

查看上的演示

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

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