Jeroen Jeroen - 5 months ago 6
CSS Question

How to stick the content of different divs together as if they form one paragraph?

My website contains a column with a list in it. I would like to start every single item with a @-sign instead of a bullet and stick the textual content of the

div
s in that item together. I copied the full code of my website underneath (JSFiddle):



ul {
margin: 0;
padding: 0;
}
.item-list {
border: solid 1px black;
padding: 20px;
width: 230px;
}
.item-list li {
list-style: inside none"@";
}
.field-name-field-plaats {
display: inline;
}
.field-items {
display: inline-block;
}
.field-name-field-aantal::before {
content: " (";
}
.field-name-field-aantal::after {
content: "x)";
}
.field-name-field-aantal {
display: inline;
}

<div class="item-list">
<ul>
<li>
<div class="entity entity-field-collection-item field-collection-item-field-plaats-en-aantal clearfix">
<div class="content">
<div class="field field-name-field-plaats field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">Blandit cogo dolor exerci ille luctus neo olim suscipit veli</div>
</div>
</div>
<div class="field field-name-field-aantal field-type-number-integer field-label-hidden">
<div class="field-items">
<div class="field-item even">1.362</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="entity entity-field-collection-item field-collection-item-field-plaats-en-aantal clearfix">
<div class="content">
<div class="field field-name-field-plaats field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">Augue humo in interdico persto ymo. Abbas eligo neque nibh.</div>
</div>
</div>
<div class="field field-name-field-aantal field-type-number-integer field-label-hidden">
<div class="field-items">
<div class="field-item even">5.487</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>





Actual list

This is not precisely the result that I want. Ideally, I would like to achieve something like this:

Desired list

Unfortunately, Paint doesn't deliver the correct CSS code... ;) I tried to play around with
white-space: nowrap
, but of course, that results in a single line of text, which is not what I want. Can you help me?

Answer

Try ul li *: display: inline !important;

This should make everthing inside the lis inline elements

EDIT/ADDITION:

Here's a fiddle: https://jsfiddle.net/gk3nwdq4/2/

I also changed the CSS for the list-items in that to make the"@" be left of the text:

.item-list li {
  list-style: "@";
  margin: 5px 3px;
  padding-left: 5px;
} 
Comments