Question

我想问你的专家一个基于CSS的问题，我认为你可能很容易回答这个问题。我试过 - 但失败了。

我已经看过这支钢笔并且非常欣赏这种效果 - 尽管如果文字可以放在一行上会很完美，例如：

标题：Foo

并保持隐藏的滚动不变。

谢谢！罗布

  <div class="badge">
    <span class="title">Title:</span>
    <div>
      <span class="first">Foo</span>
      <span class="second">Bar</span>
    </div>
  </div>


body {
  background:#fff;
  font:14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.badge {
  margin:100px auto;
  width:80px;
  height:40px;
  padding:10px 0px;
  border-radius:4px;
  background-color:#e3e3e3;
  box-shadow:0 1px rgba(255,255,255,.75), inset 0 1px 2px rgba(0,0,0,.1);
  text-align:center;
  color:#949494;
  line-height:14px;
  text-shadow:0 1px 0 #fff;
  div {
    overflow:hidden;
    padding:2px 0;
    height:16px;
  }
  span {
    display:block;
    font-size:18px;
    color:#8b8b8b;
    cursor:default;
  }
  &:hover {
      .first {
        top:-20px;
      }
      .second {
        top:-19px;
      }
  }
}

.title {
  margin-bottom:5px;
  font-size:12px;
  font-weight:100;
}

.first, .second {
  position:relative;
  top:0;
  transition:top .1s ease-in;
  -webkit-transition:top .1s ease-in;
  -moz-transition:top .1s ease-in;
}

.first {
  margin-bottom:5px;
}

Answer 1

只需使用：

display: inline;

而不是

display: block;

在跨度上。

P.S。您的代码不是有效的CSS。那就是SCSS必须编译成CSS！

Answer 2

在链接中查看我的更新

codeopen

    body {
  background:#fff;
  font:14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.badge {
  margin:100px auto;
  width:150px;
  height:20px;
  padding:10px 0px;
  border-radius:4px;
  background-color:#e3e3e3;
  box-shadow:0 1px rgba(255,255,255,.75), inset 0 1px 2px rgba(0,0,0,.1);
  text-align:center;
  color:#949494;
  line-height:14px;
  text-shadow:0 1px 0 #fff;
  div {
    overflow:hidden;
    padding:2px 0;
    height:16px;
  }
  span {
    display:block;
    font-size:18px;
    color:#8b8b8b;
    cursor:default;
  }
  &:hover {
      .first {
        top:-20px;
      }
      .second {
        top:-19px;
      }
  }
}

.title {
  margin-bottom:5px;
  font-size:12px;
  font-weight:100;
  width:50%;
  float:left;
}

.first, .second {
  position:relative;
  top:0;
  transition:top .1s ease-in;
  -webkit-transition:top .1s ease-in;
  -moz-transition:top .1s ease-in;
}

.first {
  margin-bottom:5px;
}

Answer 3

您需要为徽章类实施-webkit-box。

Working demo

IE9 +，Firefox，Chrome，Safari和Opera都支持

-webkit-box。

如何通过CSS将两行文本更改为一行？

3 个答案: