如何将不同div的内容粘在一起，好像它们形成一个段落一样？

Question

我的网站包含一个列表，其中包含一个列表。我想用@ -sign而不是子弹开始每一个项目，并将div的文本内容粘在一起。我复制了我的网站的完整代码（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>

这不是我想要的结果。理想情况下，我想实现这样的目标：

不幸的是，Paint没有提供正确的CSS代码...;）我试图使用white-space: nowrap，但当然，这会导致单行文本，这不是我想要的。你能救我吗？

Answer 1

尝试ul li *: display: inline !important;

这应该使内部内部li的内联元素

EDIT / ADDITION：

这是一个小提琴：https://jsfiddle.net/gk3nwdq4/2/

我还更改了列表项的CSS，使文本左侧留下“@”：

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

Answer 2

ul {
  margin: 0;
  padding: 0;
}
.item-list {
  border: solid 1px black;
  padding: 20px;
  width: 230px;
}
.item-list li {
  list-style: none;
  padding-left: 25px;
  position: relative;
  margin-bottom: 15px;
}

.item-list li:before {
  content: '@';
  position: absolute;
  left: 0;
  top: 0;
}
.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>

Answer 3

试试这个，

.item-list li {
  list-style-type: none;
  margin: 5px 3px;
  padding-left: 5px;
}
.item-list li:before{
  content:'@';
  margin-left:-25px;
  margin-right:6px;
}