Question

我正在尝试制作一个小小的导航栏，这需要很长时间，我没有做过。如何移动最后一个链接，向右移动？浮动：对;不起作用。

如果可能没有绝对位置。

这是我的HTML代码：

/* Nomalyze.css */

html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}body,ul{margin:0;}

/* ##### Début du code ##### */
/*
{
	border: 1px solid black;
}*/

nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #8395a7;
} /*--- Bloc de la barre de navigation, fixée en haut, qui prend toute la largeur, couleur grise ---*/

ul {
	list-style-type: none;
	padding: 0;
	display: flex;
} /*--- Retrait de la liste à puce, retrait du padding dû à l'espace laissé par les puces. Mets les différents liens l'un à coté de l'autre.---*/

li a {
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	color: white;
}
/*
 * Consiède les liens comme des blocks comme ça le display flex fonctionne. 
 * Les paddings(top/bottom) détermine la hauteur de la navbar. Augmenter les deux en même temps si vous voulez augmenter sa taille.
 * Les paddings(left/right) détermine l'espacement entre deux liens
 * Retrait de la ligne en dessous des liens + couleur
 */

li a:hover {
	background-color: #576574;
	color: white;
}

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#Menu1">Menu1</a></li>
				<li><a href="#Menu2">Menu2</a></li>
				<li><a href="#Menu3">Menu3</a></li>
				<li class="alignRight"><a href="#Menu4">Menu4</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

感谢阅读！

Answer 1

可能有多种方法可以解决这个问题，但其中一种方法是将当前位于<li>标记的.alignRight类更新为以下内容：

.alignRight {
    margin-left: auto;
}

导航栏|显示flex |浮动？

1 个答案: