【发布时间】：2014-12-16 01:19:38
【问题描述】：
我想水平对齐六个跨度。我正在使用 Wordpress 创建页面。这是代码：（您可以在问题底部的jsFiddle链接中找到Css）
HTML
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
[...]
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
CSS
.sixth {
width: 13.6%;
vertical-align: bottom;
}
.viewProf {
width: 140px;
height: 140px;
margin: 5px;
float: left;
border: 3px solid #780b07;
border-radius: 7px;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 4px 4px 6px #444;
cursor: pointer;
}
.viewProf .maskProf,
.viewProf .contentProf {
width: 140px;
height: 140px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.viewProf img {
display: block;
position: relative
}
.viewProf h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 13px;
padding: 11px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.viewProf p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 15px 25px 25px;
text-align: center
}
.viewProf a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.viewI a.info:hover {
box-shadow: 0 0 5px #000
}
.view-first .maskProf {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219, 127, 8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .maskProf {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
结果如下：
如何去除第一个跨度底部的空格？
编辑
jsFiddle 中的代码有效，但 wordpress 中的结果无效。我尝试过使用不同的浏览器，但我遇到了同样的问题。会是什么？
【问题讨论】：
-
添加您尝试过的代码.. 没有看到它我建议您将所有跨度放在一个 div 中并在该 div 上使用 clearfix，然后将所有跨度浮动。
-
另外，将 div（块元素）放入内联元素（元素）通常也不是一件好事。
-
您能具体说明您的建议吗？
-
@narutov6: 1. 发布您的 CSS 代码，以便我们知道您尝试了什么。 2. 将
divs 放入spans并不好，因为您不应该将块元素放入内联元素中。将spans 更改为divs。 -
您很可能在某处有另一个 CSS 规则干扰了第一个盒子设计。我建议打开开发者工具并尝试弄清楚是什么风格让盒子看起来像这样。
标签： html css wordpress alignment