2021-01-16

css中Li标签的行排列

HTML

<div class="box2">
	<nav class="menu">
		<ul>
			<li><a href="#">トップ</a></li>
			<li><a href="#">雑貨</a></li>
			<li><a href="#">ガジェット</a></li>
			<li><a href="#">お出掛け</a></li>
			<li><a href="#">食べ物</a></li>
			<li><a href="#">お問い合わせ</a></li>
		</ul>
	</nav>
</div>

---

CSS

/* 菜单标题*/
.menu ul {margin: 0;
padding: 0;
list-style: none}

.menu li a{display: block;
		padding: 5px;
		color: #000000;
		font-size: 14px;
		text-decoration: none}

/鼠标移动上去显示颜色状态 --hover/

.menu li a:hover{background-color: red}

.menu ul:after {content: “”;
display: block;
clear: both}

/float: left 左对齐/

.menu li {float: left;
width: auto}