Стиль значка jquery не работает для неупорядоченного списка

Question

У меня есть страница, которая выглядит как

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<ul id="menu" style="width:150px">
  <li>
    Bangladesh <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>
        Munshigonj <span class="ui-icon-caret-1-e"></span>
        <ul>
          <li>Khaleast</li>
          <li>Collagepara</li>
          <li>Mathpara</li>
        </ul>
      </li>
      <li>Dhaka</li>
      <li>Narayangonj</li>
    </ul>
  </li>
  <li>
    USA <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>Fargo</li>
      <li>New York</li>
      <li>Los Angeles</li>
    </ul>
  </li>
  <li>
    Span <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>Barcelona</li>
      <li>Real Madrid</li>
      <li>Seviya</li>
    </ul>
  </li>
</ul>

<script>
  $(document).ready(function() {
    $('#menu').menu();
  });
</script>

Теперь элементы списка отображаются в виде меню, но панель значков для class="ui-icon-caret-1-e" или любой значок не показывает значок, а ширина не реагирует.
Что я должен делать? Я попытался использовать ссылку для стиля в разделе заголовка, но когда я наведу курсор на элемент списка с элементом sapn, вместо значка отображается квадратное пустое поле.

Answer 1

Чтобы заставить элемент находиться в одной строке, вы можете использовать white-space: nowrap:

Свертывает пробелы, как при обычном, но подавляет разрывы строк (перенос текста) внутри источника

^{https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values}

Как это:

#menu .ui-menu-item {
  white-space: nowrap
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<ul id="menu" style="width:150px">
  <li>
    Bangladesh <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>
        Munshigonj <span class="ui-icon-caret-1-e"></span>
        <ul>
          <li>Khaleast</li>
          <li>Collagepara</li>
          <li>Mathpara</li>
        </ul>
      </li>
      <li>Dhaka</li>
      <li>Narayangonj</li>
    </ul>
  </li>
  <li>
    USA <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>Fargo</li>
      <li>New York</li>
      <li>Los Angeles</li>
    </ul>
  </li>
  <li>
    Span <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>Barcelona</li>
      <li>Real Madrid</li>
      <li>Seviya</li>
    </ul>
  </li>
</ul>

<script>
  $(document).ready(function() {
    $('#menu').menu();
  });
</script>