当其中一个是图像背景时，在同一条线上制作两个跨度？

时间：2015-10-13 17:21:35

标签： html css

我有一系列跨度，其行为类似于推特按钮（收藏，回复，转发），但带有背景图像的跨度在其他行的范围内略低一些。 我怎样才能改变跨度出现在同一条线上？

这就是网站上出现的情况 design

这是代码：

HTML：

<div class="tc-tweet-share">
                <a href="${tweet.replayUrl}"><span class="tc-btn tc-btn-repply">&nbsp;</span></a>
                <a href="${tweet.retweetUrl}"><span class="tc-btn tc-btn-retweet">&nbsp;</span> <span class="tc-tweet-counts">${tweet.retweetCount}</span></a>
                <a href="${tweet.favoriteUrl}"><span class="tc-btn tc-btn-favorite">&nbsp;</span> <span class="tc-tweet-counts">${tweet.favoriteCount}</span></a>
            </div>

CSS：

.tc-tweet-share {
    vertical-align: top;
    text-align: left;
    padding: 40px 0 0 0;
    display: inline-block;
}

.tc-tweet-share > a {
    text-decoration: none;
}

.tc-btn {
    background-image: url('https://g.twimg.com/dev/documentation/image/everything-sprite.png');
    background-repeat: no-repeat;
    display: inline-block;
}

.tc-btn.tc-btn-repply {
    width: 16px;
    height: 16px;
    background-position: 0 0;
    margin-right: 25px;
}

.tc-btn.tc-btn-repply:hover {
    background-position: -16 0;
}

.tc-btn.tc-btn-retweet {
    width: 19px;
    height: 16px;
    background-position: -80 0;
}

.tc-btn.tc-btn-retweet:hover {
    width: 19px;
    background-position: -99 0;
}

.tcn-btn.tc-btn-retweet-clicked {
    background-position: -118 0;
}

.tc-btn.tc-btn-favorite {
    width: 16px;
    height: 16px;
    background-position: -32 0;
}

.tc-btn.tc-btn-favorite:hover {
    width: 16px;
    height: 16px;
    background-position: -48 0;
}

.tc-tweet-counts {
    color: rgb(177, 177, 174);
    margin-right: 30px;
    margin-left: 5px;
    display: inline-block;
}

1 个答案:

答案 0 :(得分：0)

设置垂直对齐：

.tc-tweet-counts {
    ...
    vertical-align: bottom;
}

＆＃13;
＆＃13; 
#slick-carousel {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 40px;
}
#arrows {
  display: inline-block;
  width: 100%;
  position: absolute;
  top: 215px;
}
.slick-arrow:nth-child(1) {
  float: left;
}
.slick-arrow:nth-child(2) {
  float: right;
}
div.tc-main-container {
  font-family: 'Helvetica Neue', 'Gotham Narrow', sans-serif, arial;
  top: 0;
  left: 0;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}
.slick-slide {
  width: 310px;
  /*height: 150px;*/
}
.slick-track {
  height: 170px !important;
}
div.tc-main-container > h1 {
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
}
div.tc-tweet-frame {
  /*display: block;
    position: relative;*/
  float: left;
  padding: 10px 10px 10px 20px;
  margin: 20px;
  border-radius: 5px;
  font-size: 12px;
  border: 1px solid rgb(177, 177, 174);
}
div.tc-tweet-topbar {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 100%;
}
div.tc-tweet-topbar > img {
  padding: 5px 5px 5px 0;
  display: inline-block;
  width: 45px;
  height: 45px;
}
div.tc-tweet-userinfo {
  display: inline-block;
  vertical-align: top;
  padding-top: 10px;
}
div.tc-tweet-topbar > img.twitter-logo {
  width: 42px;
  float: right;
  position: absolute;
  right: 0;
}
@media (max-width: 845px) {
  div.tc-tweet-topbar > img.twitter-logo {
    right: -6;
  }
}
div.tc-tweet-userinfo > h4 {
  font-weight: bold;
}
div.tc-tweet-userinfo > h6 {
  color: rgb(177, 177, 174);
  font-weight: 100;
}
div.tc-tweet-content {
  text-align: left;
  line-height: 20px;
  font-weight: 300;
}
div.tc-tweet-content > span.tc-tweet-timespan {
  color: rgb(177, 177, 174);
  font-weight: 200;
}
.tc-tweet-share {
  vertical-align: top;
  text-align: left;
  padding: 40px 0 0 0;
  display: inline-block;
}
.tc-tweet-share > a {
  text-decoration: none;
}
.tc-btn {
  background-image: url('https://g.twimg.com/dev/documentation/image/everything-sprite.png');
  background-repeat: no-repeat;
  display: inline-block;
}
.tc-btn.tc-btn-repply {
  width: 16px;
  height: 16px;
  background-position: 0 0;
  margin-right: 25px;
}
.tc-btn.tc-btn-repply:hover {
  background-position: -16 0;
}
.tc-btn.tc-btn-retweet {
  width: 19px;
  height: 16px;
  background-position: -80 0;
}
.tc-btn.tc-btn-retweet:hover {
  width: 19px;
  background-position: -99 0;
}
.tcn-btn.tc-btn-retweet-clicked {
  background-position: -118 0;
}
.tc-btn.tc-btn-favorite {
  width: 16px;
  height: 16px;
  background-position: -32 0;
}
.tc-btn.tc-btn-favorite:hover {
  width: 16px;
  height: 16px;
  background-position: -48 0;
}
.tc-tweet-counts {
  color: rgb(177, 177, 174);
  margin-right: 30px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: bottom;
}
.tc-twitter-arrows {
  text-decoration: none;
  background: none;
  font-size: 25px;
  padding: 0 10px;
  color: rgb(177, 177, 174);
  border: none;
}
.slick-prev:before,
.slick-next:before {
  color: rgb(177, 177, 174);
  z-index: 99999;
}
＆＃13; 
<div class="tc-main-container" data-sly-use.tweetHelper="twitter.TweetHelper">
  <h1>What our users are saying</h1>
  <div id="slick-carousel" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}' data-sly-list.tweet="${tweetHelper.tweets}">
    <div class="tc-tweet-frame">
      <div class="tc-tweet-topbar">
        <img src="${tweet.avatar}" />
        <div class="tc-tweet-userinfo">
          <h4>${tweet.name}</h4>
          <h6>@${tweet.screenName}</h6>
        </div>
        <img class="twitter-logo" width="42" src="https://pbs.twimg.com/profile_images/615680132565504000/EIpgSD2K_bigger.png" />
      </div>
      <div class="tc-tweet-content">
        <p>${tweet.text}</p>
        <span class="tc-tweet-timespan">${tweet.formatedPostDate}</span>
      </div>
      <div class="tc-tweet-share">
        <a href="${tweet.replayUrl}"><span class="tc-btn tc-btn-repply">&nbsp;</span></a>
        <a href="${tweet.retweetUrl}"><span class="tc-btn tc-btn-retweet">&nbsp;</span> <span class="tc-tweet-counts">2</span></a>
        <a href="${tweet.favoriteUrl}"><span class="tc-btn tc-btn-favorite">&nbsp;</span> <span class="tc-tweet-counts">3</span></a>
      </div>
    </div>
  </div>
  <div id="arrows"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题