Maël Brs Maël Brs - 4 months ago 6
CSS Question

Display elements inline in a list-group block

I am starting with css.
I want to align two icons in column at the right, inside a list-group, i have also a list in that block whose pushing out my icons of the box like this Result expected



.wineItemLine {
display:block;
}

.list-button {
float :right;
display:inline;
}
.wineAttributes {
display:inline;
}

.list-group {
max-width: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="list-group" ng-controller="listController">
<div ng-repeat="vin in wines | orderBy:sortType:sortReverse | filter:searchWine" class="list-group-item">

<div class=wineAttributes>
<span class="wineItemLine">
Un bon vin
</span>
<span class="wineItemLine">
Chateau breton
</span>
<div class="wineItemLine">
<span style="padding-right:10px;">
Bordeaux
</span>
<span>
Rouge
</span>
</div>
<div class="wineItemLine">
<span style="padding-right:10px;">
2003
</span>
<span>
3
</span>

</div>

</div>
<div class=list-button>
<button class="btn">
<span class="glyphicon glyphicon-pencil" ></span>
</button>

<button class="btn">
<span class="glyphicon glyphicon-remove" ></span>
</button>
</div>

</div>

</div>
</body>





see my jsfiddle

Answer

This should help

  .wineItemLine {
    display:block;
}

.list-button {
    float :right;
    display:block;
  width:40%;
}
.wineAttributes {
    display:inline;
  max-width: 50%;
  float: left;
}

.list-group {
    max-width: 300px;
}

.list-group-item{
  height: 110px;
}

.btn{
  display: block;
  margin: 7px;
  float: right;
}

fiddle