Question

我正在尝试在1行显示ID = 13502的所有<li>，并且每行列出所有剩余的<li>。最后一个工作正在运行，但我无法获得ID为13502的4 <li>。

HTML：

    <div id="side-header">
    <nav class="fusion-main-menu" aria-label="Main Menu">
    <ul role="menubar" id="menu-main-menu-de" class="fusion-menu">
    <li role="menuitem" id="menu-item-13502-nl" class="lang-item lang-item-33 lang-item-nl lang-item-first menu-item menu-item-type-custom menu-item-object-custom menu-item-13502-nl" data-classes="lang-item"></li>
    <li role="menuitem" id="menu-item-13502-en" class="lang-item lang-item-37 lang-item-en menu-item menu-item-type-custom menu-item-object-custom menu-item-13502-en" data-classes="lang-item"></li>
    <li role="menuitem" id="menu-item-13502-de" class="lang-item lang-item-30 lang-item-de current-lang menu-item menu-item-type-custom menu-item-object-custom current_page_item menu-item-home menu-item-13502-de" data-classes="lang-item"></li>
    <li role="menuitem" id="menu-item-13502-fr" class="lang-item lang-item-41 lang-item-fr menu-item menu-item-type-custom menu-item-object-custom menu-item-13502-fr" data-classes="lang-item"></li>
    <li role="menuitem" id="menu-item-13693" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-13549 current_page_item menu-item-13693">
    <a href="http://example.com/de/home-de/" class="fusion-flex-link"><span class="fusion-megamenu-icon"><i class="fa glyphicon fa-home fa-fw"></i></span><span class="menu-text">Home</span></a></li>
    <li role="menuitem" id="menu-item-13588" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13588">
    <a href="http://example.com/de/finde-geschaftspartner/"><span class="menu-text">Finde Geschäftspartner</span></a></li>
    <li role="menuitem" id="menu-item-13898" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13898">
    <a href="http://example.com/de/finde-wiederverkaufer/"><span class="menu-text">Finde Wiederverkäufer</span></a></li>
    </ul>
    </nav>
    </div>

CSS：

#side-header .fusion-main-menu #menu-item-13502-nl,
#side-header .fusion-main-menu #menu-item-13502-de,
#side-header .fusion-main-menu #menu-item-13502-en,
#side-header .fusion-main-menu #menu-item-13502-fr{
 list-style-type:none;
 list-style: none;
 float: left;
}

Answer 1

使用float: left;删除display:inline;。检查一下：

＆＃13;

#side-header .fusion-main-menu #menu-item-13502-nl,
#side-header .fusion-main-menu #menu-item-13502-de,
#side-header .fusion-main-menu #menu-item-13502-en,
#side-header .fusion-main-menu #menu-item-13502-fr{
 list-style-type:none;
 list-style: none;
 display:inline;
}

＆＃13;

<div id="side-header">
  <nav class="fusion-main-menu" aria-label="Main Menu">
    <ul role="menubar" id="menu-main-menu-de" class="fusion-menu">
      <li role="menuitem" id="menu-item-13502-nl" class="lang-item lang-item-33 lang-item-nl lang-item-first menu-item menu-item-type-custom menu-item-object-custom menu-item-13502-nl" data-classes="lang-item">A</li>
      <li role="menuitem" id="menu-item-13502-en" class="lang-item lang-item-37 lang-item-en menu-item menu-item-type-custom menu-item-object-custom menu-item-13502-en" data-classes="lang-item">B</li>
      <li role="menuitem" id="menu-item-13502-de" class="lang-item lang-item-30 lang-item-de current-lang menu-item menu-item-type-custom menu-item-object-custom current_page_item menu-item-home menu-item-13502-de" data-classes="lang-item">C</li>
      <li role="menuitem" id="menu-item-13502-fr" class="lang-item lang-item-41 lang-item-fr menu-item menu-item-type-custom menu-item-object-custom menu-item-13502-fr" data-classes="lang-item">D</li>
      <li role="menuitem" id="menu-item-13693" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-13549 current_page_item menu-item-13693">
        <a href="http://example.com/de/home-de/" class="fusion-flex-link"><span class="fusion-megamenu-icon"><i class="fa glyphicon fa-home fa-fw"></i></span><span class="menu-text">Home</span></a></li>
      <li role="menuitem" id="menu-item-13588" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13588">
        <a href="http://example.com/de/finde-geschaftspartner/"><span class="menu-text">Finde Geschäftspartner</span></a></li>
      <li role="menuitem" id="menu-item-13898" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13898">
        <a href="http://example.com/de/finde-wiederverkaufer/"><span class="menu-text">Finde Wiederverkäufer</span></a></li>
    </ul>
  </nav>
</div>

＆＃13;

在一行上显示某些<li>，其余</li> <li>一行

1 个答案: