使用bootstrap在li内部内联内容

Question

我的标题内容包含ul标签。我不能内联它们。

HTML

<div class="navbar-header">
  <ul class="nav navbar-nav navbar-right">
    <li>
      <div>
         <span><img src="1"></span>
         <p class="p1">row information</p>
      </div>
    </li>
    <li>
      <div>
         <span><img src="1"></span>
         <p class="p1">row information</p>
      </div>
    </li>
    <li>
      <div>
         <span><img src="1"></span>
         <p class="p1">row information</p>
      </div>
    </li>
  </ul>
</div>

Here is fiddle

Answer 1

1）删除所有CSS并包含CDN中的bootstrap css和js，因为您使用的是bootstrap导航语法。 2）将p元素更改为跨度，你就可以了。

Answer 2

使用 p1 类显示样式将图像设置为内嵌块并完全内联它们并移除flex-direction。像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="" id="livsmedelsSokOrd" value="" />
<button id="sok-button">
Search
</button>

<span id="tabell">

</span>

<table id="tabell">
  <thead>
    <tr>
      <th>Namn</th>
      <th>Energi</th>
      <th>kolhydrater</th>
      <th>Protein</th>
      <th>Fett</th>
    </tr>
  </thead>
  <tbody></tbody>

</table>

https://jsfiddle.net/toL6f4h5/