CODEWITHSUNDEEP
htmlcss
Kevin Van Ryckegem
Kevin Van Ryckegem

Reputation: 1945

Why is there a linebreak between these 2 elements?

I'm not sure why there's a line break, but you'll notice in this jsfiddle: https://jsfiddle.net/03th34ak/

That it displays:

Username

5 stars

Purchased

However, I expect this code to print this result:

Username 5 stars Purchased

Why is there a line break around the stars? I tried making elements display:inline, however that didn't solve it. Also the ul containing the stars cannot be display:inline as it uses the flex display in order to show the correct star. I also changed the ul to a span, or added a div containing display:inline around it. I'm not sure what's wrong with this one.

Code:

.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>

Upvotes: 0

Views: 66

Answers (5)

Oriol
Oriol

Reputation: 288170

There is a "line break" because the star wrapper is block level:

.c-rating {
  display: flex;
}

It should be inline-level instead:

.c-rating {
  display: inline-flex;
}

And then, in order to make .c-rating encompass the stars, use width instead of flex-basis.

.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
}
<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>

Upvotes: 1

Jeramiah Harland
Jeramiah Harland

Reputation: 864

Have you tried changing

display: flex;

To

display: inline-flex;

And setting the width manually to 120px? That worked for me.

Here's a JSFiddle: https://jsfiddle.net/03th34ak/17/

And for reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Magood
Magood

Reputation: 106

One way I did it was by adding width to each element and float left;

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>

Upvotes: 0

Pcodea Xonos
Pcodea Xonos

Reputation: 161

https://jsfiddle.net/k5wxjt6v/ try this

.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;
}
<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>

Upvotes: 3

Declan Fitzpatrick
Declan Fitzpatrick

Reputation: 160

You could make username and the purchased section part of the list and then use display: inline on the c-rating li elements

<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>

for example

Upvotes: 1

Related Questions