我是第一次潜入本网站的页脚,我需要在水平方向下放置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%;
}
如果有人知道我正在制作什么错误,或者更好的方式来安排这些错误,我会向我提供左侧垂直列出的所有项目。我很乐意帮助您!
答案 0 :(得分: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>
答案 1 :(得分:1)
我就是这样做的。但是我有漂浮物和清除它们的问题。
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。
答案 2 :(得分:1)
这里发生了一些事情。首先,您要为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>
答案 3 :(得分:0)
这是一个修复程序 -
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;
}