Question

嘿所以我试图将所有共享图标排成一行，除了下面的底部是我的代码示例，任何帮助将不胜感激，谢谢。

的链接

HTML代码

<div id="postsocialsharewrapper">
  <input type="checkbox" class="cbox" id="share" unchecked />
  <label for="share" class="label entypo-share"></label>
  <div class="postsocialshare">
    <ulss>
      <a target="_blank" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink();?>" ><liss class="entypo-twitter"></liss></a>
      <a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" ><liss class="entypo-facebook"></liss></a>
      <a href="https://plus.google.com/share?hl=en&url=<?php if(is_home()){echo home_url();}else{the_permalink();} ?>" ><liss class="entypo-gplus"></liss></a>
      <a target="_blank" href="http://tumblr.com/share/link?url=<?php the_permalink(); ?>&media=<?php echo $image->guid;?>&description=<?php echo rawurlencode(get_the_title()); ?>" ><liss class="entypo-tumblr"></liss></a>
      <a target="_blank" href="http://stumbleupon.com/submit?url=<?php the_permalink(); ?>&media=<?php echo $image->guid;?>&description=<?php echo rawurlencode(get_the_title()); ?>" ><liss class="entypo-stumbleupon"></liss></a>
    </ulss>
  </div>
</div>

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

html {
  margin:0;
  padding:50px 0;
  background: #161616 url(http://i43.tinypic.com/sfgmc3.gif);
}

#postsocialsharewrapper {
  text-align:center;
  position:relative;
  left:0;
  right:0;
  margin: 40px auto;
  width:300px;
}

input[type="checkbox"]{display:none;}

.cbox:checked + .label {
  color:#0e90d2;
  opacity: 0.8;
}

.cbox:checked ~ .postsocialshare {
  transform:scale(1) translateY(20px);
  -webkit-transform:scale(1) translateY(20px);
}

.label {
  font-family: 'entypo';
  font-size:22px;
  cursor:pointer;
  margin:0;
  padding:5px 10px;
  border-radius:10%;
  color:#0e90d2;
  opacity: 0.4;
}

.postsocialshare {
  transform-origin:50% 0%;
  transform:scale(0) translateY(-190px);
  transition:.5s;
  -webkit-transform-origin:50% 0%;
  -webkit-transform:scale(0) translateY(-190px);
  -webkit-transition:.5s;
}
.postsocialshare ulss {
  position:relative;
  left:0;
  right:0;
  margin:-5px auto 0;
  height:46px;
  width:300px;
  padding:0;
  list-style:none;
}

.postsocialshare ulss liss {
  font-size:17px;
  font-family: 'entypo-social';
  cursor:pointer;
  width:60px;
  margin:0;
  padding:12px 0;
  text-align:center;
  float:left;
  color:#0e90d2;
  height:22px;
  opacity:0.4;
}

.postsocialshare ulss liss:hover {opacity:1 !important;color:red !important;}

.postsocialshare liss[class*="twitter"] {}
.postsocialshare liss[class*="gplus"] {}
.postsocialshare liss[class*="stumbleupon"] {}
.postsocialshare liss[class*="tumblr"] {}
.postsocialshare liss[class*="facebook"] {}

.postsocialshare ulss liss.entypo-tumblr:before {
  font-family: 'entypo';
  content:'\F315';
}

.postsocialshare ulss liss.entypo-facebook:before {
  font-family: 'entypo';
  content:'\F30C';
}

.postsocialshare ulss liss.entypo-gplus:before {
  font-family: 'entypo';
  content:'\F30F';
}

.postsocialshare ulss liss.entypo-stumbleupon:before {
  font-family: 'entypo';
  content:'\F31E';
}

.postsocialshare ulss liss.entypo-twitter:before {
  font-family: 'entypo';
  content:'\F309';
}

.label.entypo-share:before {
  font-family: 'entypo';
  content:'\E715';
  color: #0e90d2;
}

Answer 1

由于它们已经垂直对齐，我猜你希望它们水平对齐。

.postsocialshare ulss liss{ display:block; width:100%; }

编辑： http://codepen.io/anon/pen/XJEPGY

Answer 2

请尝试这个我觉得它可以帮到你

.postsocialshare ulss liss {
font-size:17px;
font-family: 'entypo-social';
cursor:pointer;
margin:0;
padding:12px 0;
text-align:center;
float:left;
color:#0e90d2;
height:22px;
opacity:0.4;
display:block;
width:10%;
}

http://codepen.io/anon/pen/ogqQzZ

如何修复分享按钮对齐所有问题？

2 个答案: