Question

我不确定为什么会有换行符，但你会注意到这个jsfiddle： https://jsfiddle.net/03th34ak/

显示：

用户名

5星

购买

但是，我希望此代码可以打印此结果：

用户名5星购买

为什么星星周围会断线？我尝试制作元素display:inline，但这并没有解决它。此外，包含星星的ul也不能为display:inline，因为它使用弹性显示来显示正确的星星。我还将ul更改为了一个范围，或者在其周围添加了一个包含display:inline的div。我不确定这个有什么问题。

代码：

.c-rating {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  list-style:none;
  margin:0;
  padding:0
}

.c-rating__item_nohover_dis {
  -webkit-box-flex:0;
  -webkit-flex:0 0 24px;
  -ms-flex:0 0 24px;
  flex:0 0 24px;
  height:24px;
  background:url(http://callmenick.com/_development/five-star-rating/img/stars.svg)
}

.c-rating__item_nohover_dis.is-active {
  background-position:-24px 0
}

<span style="float: right;">
  <a href="user/1">Username</a> 
  <ul class="c-rating"><li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li><li class="c-rating__item_nohover_dis"></li></ul> 
  <span class="label label-success">Purchased</span> 
  <span class="label label-info">05/02/2016</span>
</span>

Answer 1

https://jsfiddle.net/k5wxjt6v/试试这个

＆＃13;

.c-rating {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: calc(24px * 5)
}

.c-rating__item_nohover_dis {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 24px;
  -ms-flex: 0 0 24px;
  flex: 0 0 24px;
  height: 24px;
  background: url(http://callmenick.com/_development/five-star-rating/img/stars.svg)
}

.c-rating__item_nohover_dis.is-active {
  background-position: -24px 0
}

.container > * {
  float: left;
}

＆＃13;

<div class="container" style="float: right;">
  <a href="user/1">Username</a>
  <ul class="c-rating">
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
  </ul>
  <span class="label label-success">Purchased</span>
  <span class="label label-info">05/02/2016</span>
</div>

＆＃13;

Answer 2

您可以在列表中创建用户名和购买的部分，然后在c-rating li元素上使用display：inline

<ul class="c-rating">
   <li> <a href="user/1">Username</a></li>
  <li class="c-rating__item_nohover_dis"></li>
  <li class="c-rating__item_nohover_dis"></li>
  <li class="c-rating__item_nohover_dis"></li>
  <li class="c-rating__item_nohover_dis"></li>
  <li class="c-rating__item_nohover_dis"></li>
  <li><span class="label label-success">Purchased<span class="label label-info">05/02/2016</span></li>
</ul>

例如

Answer 3

有一个＆＃34;换行符＆＃34;因为星形包装是块级别：

class="seat reserved selected

它应该是内联级别的：

.c-rating {
  display: flex;
}

然后，为了使.c-rating { display: inline-flex; }包含星标，请使用.c-rating代替width。

＆＃13;

flex-basis

＆＃13;

.c-rating {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0
}
.c-rating__item_nohover_dis {
  width: 24px;
  height: 24px;
  background: url(http://callmenick.com/_development/five-star-rating/img/stars.svg)
}
.c-rating__item_nohover_dis.is-active {
  background-position: -24px 0
}

＆＃13;

Answer 4

我做的一种方法是为每个元素添加宽度并向左浮动;

https://jsfiddle.net/03th34ak/16/

<span style="float: right;">
  <a style='float:left; ' href="user/1">Username</a> 
  <ul class="c-rating" style='float:left; width: 125px;'>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
    <li class="c-rating__item_nohover_dis"></li>
  </ul> 
  <span style='float:left; width: 75px;' class="label label-success">Purchased</span> 
  <span style='float:left;' class="label label-info">05/02/2016</span>
</span>

Answer 5

您是否尝试过更改

display: flex;

要

display: inline-flex;

手动将宽度设置为120px？这对我有用。

这是一个JSFiddle：https://jsfiddle.net/03th34ak/17/

供参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

为什么这两个元素之间存在换行符？

5 个答案: