fix: Menu overflow with horizontal should not affect by float ele…

…ment (#30879) * fix: Menu horizontal layout style * test: Update snapshot * fix: lint
ant-design · Jun 6, 2021 · b837ecd · b837ecd
1 parent f288aff
commit b837ecd
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 3 deletions.
diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -1351,6 +1351,150 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
           nav 3
         </span>
       </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:3"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 4
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:4"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 5
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:5"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 6
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:6"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 7
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:7"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 8
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:8"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 9
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:9"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 10
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:10"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 11
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:11"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 12
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:12"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 13
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:13"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 14
+        </span>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:14"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          nav 15
+        </span>
+      </li>
       <li
         aria-hidden="true"
         class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"

diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
@@ -29,9 +29,10 @@ ReactDOM.render(
     <Header>
       <div className="logo" />
       <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
-        <Menu.Item key="1">nav 1</Menu.Item>
-        <Menu.Item key="2">nav 2</Menu.Item>
-        <Menu.Item key="3">nav 3</Menu.Item>
+        {new Array(15).fill(null).map((_, index) => {
+          const key = index + 1;
+          return <Menu.Item key={key}>{`nav ${key}`}</Menu.Item>;
+        })}
       </Menu>
     </Header>
     <Content style={{ padding: '0 50px' }}>

diff --git a/components/menu/style/index.less b/components/menu/style/index.less
@@ -355,6 +355,7 @@
   }
 
   &-horizontal {
+    display: flex;
     line-height: @menu-horizontal-line-height;
     border: 0;
     border-bottom: @border-width-base @border-style-base @border-color-split;