0

将 FontAwesome 图标“caret-right”应用于我的菜单中的三个 li-/a-标签,以指示子菜单的存在。图标应右对齐。我的代码适用于 Chrome 和 Edge,但不适用于 Firefox。阅读有关通过 CDN 加载 FA 文件的可能问题,因此我切换到从我的网络空间加载它们,但没有成功。我可以看到菜单项末尾的图标,但它们被切断并向下推。这是我的 HTML 和 CSS:

 <!doctype html>
    <html lang="de">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="../css/960.css" />
        <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
        <title>Titel</title>
    <style type="text/css">
    body, select, input, textarea, button {
    	font-family: 'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;
    	font-size: 13px;
    	line-height: 1.5em;
        }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
    nav > ul > li {
        float: left;
        }
    nav > ul > li > ul {
        display: none;
        }
    nav > ul a {
        display: block;
        white-space: nowrap;
        padding: 10px;
        background: #444;
        color: #fff;
        text-decoration: none;
        }
    nav > ul > li > a:after {
    	content: "\f0d7";
    	font-family: 'FontAwesome';
        padding-left: 0.35em
        }
    nav > ul li > a:only-child:after {
        content: "";
        }
    nav > ul > li:hover > ul {
        display: block;
        position: absolute;
        }
    nav > ul > li > ul > li {
        position: relative;
        }
    nav > ul > li > ul > li > a:after {
    	float: right;
        content: "\f0da";
    	font-family: 'FontAwesome';
        padding-left: 1em
        }
    nav > ul li > a:only-child:after {
        content: "";
        }
    nav > ul > li > ul > li > ul {
        display: none;
        }
    nav > ul > li > ul > li:hover > ul {
        display: block;
        position: absolute;
        left: 100%;
        top: 0;
        }
    </style>
      </head>
      <body>
      	<nav>
    		<ul class="grid_12">
    			<li><a href="#">Home</a></li>
    			<li><a href="./mitglieder/mitglieder.php">Mitglieder</a></li>
    			<li><a href="#">Clubturniere</a>
    				<ul>
    					<li><a href="./cm/cm.php">Clubmeisterschaft</a></li>
    					<li><a href="./mobl/mobl_gw.php">Monats-Blitzturniere</a></li>
    				</ul>
    			</li>
    			<li><a href="./mannschaft/mannschaften.php">Mannschaften</a>
                    <ul>
                        <li><a href="#">Bayerische Meisterschaft</a>
                            <ul>
                                <li><a href="./mannschaft/m1.php">1. Mannschaft</a></li>
                                <li><a href="./mannschaft/m2.php">2. Mannschaft</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Münchner Meisterschaft</a>
                            <ul>
                                <li><a href="./mannschaft/m3.php">3. Mannschaft</a></li>
                                <li><a href="./mannschaft/m4.php">4. Mannschaft</a></li>
                                <li><a href="./mannschaft/m5.php">5. Mannschaft</a></li>
                                <li><a href="./mannschaft/m6.php">6. Mannschaft</a></li>
                                <li><a href="./mannschaft/m7.php">7. Mannschaft</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Senioren</a>
                            <ul>
                                <li><a href="./mannschaft/sen_m1.php">Senioren 1</a></li>
                                <li><a href="./mannschaft/sen_m2.php">Senioren 2</a></li>
                            </ul>
                        </li>
                    </ul>
    			</li>
    			<li><a href="./termine/termine.php">Termine</a></li>
    			<li><a href="#">Schachaufgaben</a>
                    <ul>
                        <li><a href="./aufgaben/schachaufgaben_1.php">Nummer 1&#8201;&#8211;&#8201;18</a></li>
                        <li><a href="./aufgaben/schachaufgaben_2.php">Nummer 19&#8201;&#8211;&#8201;36</a></li>
                    </ul>
                </li>
    			<li><a href="./archiv/archiv.php">Archiv</a></li>
    			<li><a href="./kontakt/kontakt.php">Kontakt</a></li>
    		</ul>
    	</nav>
      </body>
    </html>

该文件的链接是http://msc1836.bplaced.net/menutest.html 操作系统是 Win-10,Firefox 版本是 50.1.0。

有人可以帮忙吗?谢谢,迈克

4

3 回答 3

1

删除影响 Firefox 中white-space伪元素的 in 。nav > ul afloat: right

但是,为了使您的li元素保持直线,请给出min-width如下值:

nav > ul a {
    display: block;
    min-width: 90px;
    padding: 10px;
    background: #444;
    color: #fff;
    text-decoration: none;
}
于 2017-01-03T13:59:19.617 回答
1

删除white-space表格nav > ul a,它工作正常

 <!doctype html>
    <html lang="de">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="../css/960.css" />
        <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
        <title>Titel</title>
    <style type="text/css">
    body, select, input, textarea, button {
    	font-family: 'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;
    	font-size: 13px;
    	line-height: 1.5em;
        }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
    nav > ul > li {
        float: left;
        }
    nav > ul > li > ul {
        display: none;
        }
    nav > ul a {
        display: block;
        //white-space: nowrap;
        padding: 10px;
        background: #444;
        color: #fff;
        text-decoration: none;
        }
    nav > ul > li > a:after {
    	content: "\f0d7";
    	font-family: 'FontAwesome';
        padding-left: 0.35em
        }
    nav > ul li > a:only-child:after {
        content: "";
        }
    nav > ul > li:hover > ul {
        display: block;
        position: absolute;
        }
    nav > ul > li > ul > li {
        position: relative;
        }
    nav > ul > li > ul > li > a:after {
    	float: right;
        content: "\f0da";
    	font-family: 'FontAwesome';
        padding-left: 1em
        }
    nav > ul li > a:only-child:after {
        content: "";
        }
    nav > ul > li > ul > li > ul {
        display: none;
        }
    nav > ul > li > ul > li:hover > ul {
        display: block;
        position: absolute;
        left: 100%;
        top: 0;
        }
    </style>
      </head>
      <body>
      	<nav>
    		<ul class="grid_12">
    			<li><a href="#">Home</a></li>
    			<li><a href="./mitglieder/mitglieder.php">Mitglieder</a></li>
    			<li><a href="#">Clubturniere</a>
    				<ul>
    					<li><a href="./cm/cm.php">Clubmeisterschaft</a></li>
    					<li><a href="./mobl/mobl_gw.php">Monats-Blitzturniere</a></li>
    				</ul>
    			</li>
    			<li><a href="./mannschaft/mannschaften.php">Mannschaften</a>
                    <ul>
                        <li><a href="#">Bayerische Meisterschaft</a>
                            <ul>
                                <li><a href="./mannschaft/m1.php">1. Mannschaft</a></li>
                                <li><a href="./mannschaft/m2.php">2. Mannschaft</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Münchner Meisterschaft</a>
                            <ul>
                                <li><a href="./mannschaft/m3.php">3. Mannschaft</a></li>
                                <li><a href="./mannschaft/m4.php">4. Mannschaft</a></li>
                                <li><a href="./mannschaft/m5.php">5. Mannschaft</a></li>
                                <li><a href="./mannschaft/m6.php">6. Mannschaft</a></li>
                                <li><a href="./mannschaft/m7.php">7. Mannschaft</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Senioren</a>
                            <ul>
                                <li><a href="./mannschaft/sen_m1.php">Senioren 1</a></li>
                                <li><a href="./mannschaft/sen_m2.php">Senioren 2</a></li>
                            </ul>
                        </li>
                    </ul>
    			</li>
    			<li><a href="./termine/termine.php">Termine</a></li>
    			<li><a href="#">Schachaufgaben</a>
                    <ul>
                        <li><a href="./aufgaben/schachaufgaben_1.php">Nummer 1&#8201;&#8211;&#8201;18</a></li>
                        <li><a href="./aufgaben/schachaufgaben_2.php">Nummer 19&#8201;&#8211;&#8201;36</a></li>
                    </ul>
                </li>
    			<li><a href="./archiv/archiv.php">Archiv</a></li>
    			<li><a href="./kontakt/kontakt.php">Kontakt</a></li>
    		</ul>
    	</nav>
      </body>
    </html>

于 2017-01-03T13:51:12.523 回答
0

感谢 Minal Chauhan 和 nashcheez 的快速回复。从该部分中删除white-space命令nav > ul a解决了该问题。我还min-width对我的第 3 级链接应用了 a,否则它们的行会被换行。

于 2017-01-04T13:32:59.830 回答