Fatal编程技术网
  • css/
  • Css 引导导航菜单在IE/Edge中有换行符

Css 引导导航菜单在IE/Edge中有换行符

css internet-explorer twitter-bootstrap-3

Css 引导导航菜单在IE/Edge中有换行符,css,internet-explorer,twitter-bootstrap-3,microsoft-edge,Css,Internet Explorer,Twitter Bootstrap 3,Microsoft Edge,使用BootstrapV3.3.7，我有一个菜单，每个菜单项之间都有一个项目符号。它在Win 10/Mac/iPad/Android（浏览器/平台兼容）上的Chrome/Firefox/Safari/Opera上运行良好 然而，在IE 11和Win 10上的Edge 42上，当您调整浏览器的大小时，其中一个项目符号将占据其自身的一条线，请参见抓取 下面还有HTML/CSS HTML <!DOCTYPE html> <html lang="en"> <head>

使用BootstrapV3.3.7，我有一个菜单，每个菜单项之间都有一个项目符号。它在Win 10/Mac/iPad/Android（浏览器/平台兼容）上的Chrome/Firefox/Safari/Opera上运行良好

然而，在IE 11和Win 10上的Edge 42上，当您调整浏览器的大小时，其中一个项目符号将占据其自身的一条线，请参见抓取

下面还有HTML/CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>

<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/design/iebull.css?v=4">
<script src="/js/jquery-2.2.4.min.js"></script>
<script defer src="/js/bootstrap.min.js"></script>
</head>



<body>

  <nav class="navbar navbar-default">
     <div class='centered_content'>

        <div class="container-fluid">
          <div class="collapse navbar-collapse" id="myNavbar">

            <ul class='nav navbar-nav'>
                    <li><a href='#'>Navigation item here</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item </a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 1</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 12</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 123</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 1234</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 12345</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 123456</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 1234567</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 12345678</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item 123456789</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item here</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item here</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item here</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item here</a></li> 
                    <li><i>&bull;</i></li> <li><a href='#'>Navigation item here</a></li> 
            </ul>

          </div>
        </div>

    </div>  <!--/ centered_content -->
   </nav>


</body>
</html>
将
i
标记放在
a
标记内，如下所示

<li><a href='#'><i>&bull;</i> Navigation item </a></li> 

  •
    您可以使用css调整间距

    谢谢！我现在在家，所以明天会试试。非常感谢。我还使用了一个字体可怕的圆圈，而不是&bull；当我在链接标签中对齐时遇到问题。 
    <li><a href='#'><i>&bull;</i> Navigation item </a></li>