我想水平对齐六个跨度。我正在使用 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;
}
这是结果:
如何去掉第一个span底部的空格?
编辑
jsFiddle 中的代码有效,但 wordpress 中的结果无效。我尝试过不同的浏览器,但遇到了同样的问题。会是什么?
最佳答案
根据要求指定:
fiddle :http://jsfiddle.net/mptpL5mx/2/
您想使用一个 clearfix(可以包裹您的 float 元素并允许它们正常工作而不会破坏自身的 div)
然后你会想要 float 你的元素,以便它们很好地排列。
同时清理您的标记(行内元素中没有 block 级元素)
HTML:
<div class="holder clearfix">
<span class="sixth">
<div class="viewProf view-first">
<a href=""><img alt="" src="" /></a>
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<a href=""><img alt="" src="" /></a>
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<a href=""><img alt="" src="" /></a>
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<a href=""><img alt="" src="" /></a>
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<a href=""><img alt="" src="" /></a>
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<a href=""><img alt="" src="" /></a>
</div>
</span>
</div>
CSS:
.clearfix:before,
.clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
.holder{
background-color: #eee;
padding: 10px;
}
.sixth{
height: 50px;
width: 50px;
float: left;
border: 1px solid #000;
background-color: #fff;
margin-right: 5px;
border-radius: 5px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
关于html - Css - wordpress 中水平对齐期间的不可见边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26476151/