0

私の順序付けられていないリストは、その親要素から出て、その下にあるようです。これは簡単な修正だと確信していますが、理解できません。私はhtmlとcssが初めてです。

誰かが私のために何かを考え出すことを期待して、ここにコードを追加しました。私は以前にこの質問をしたと思います。とにかく、よくわかりません。前もって感謝します。

header {
	width: 100%;
	height: 36px;
	border-bottom: 1px solid #f0efef;
	box-shadow: 0 0 5px 0 #f0efef;
}

.header-content {
	width: 1030px;
	height: 36px;
	background-color: red;
}

.header-content p {
	margin: 0;
	font-size: 14px;
	padding: 7px 15px 0 15px;
}

.header-content ul {
	margin: 0;
	float: right;
	list-style: none;
	padding: 5px 15px 0 15px;
}

.header-content ul li {
	padding-left: 10px;
	display: inline;
}

.header-content ul li a, a:visited {
	color: #404040;
	font-size: 14px;
	text-decoration: none;
}
<header>
		<div class="header-content">
			<p>Welcome, please sign or register</p>
			<ul>
				<li><a href="#">My Account</a></li>
				<li><a href="#">Gift Cards</a></li>
				<li><a href="#">Customer Care</a></li>
				<li><a href="#">Community</a></li>
			</ul>
		</div>
	</header>

4

1 に答える 1

1

その段落要素はブロック レベルの要素なので、UL を押し下げます。この問題を解決するには、ヘッダーに p タグを残します。

header {
	width: 100%;
	height: 36px;
	border-bottom: 1px solid #f0efef;
	box-shadow: 0 0 5px 0 #f0efef;
}

.header-content {
	width: 1030px;
	height: 36px;
	background-color: red;
}

.header-content p {
	margin: 0;
	font-size: 14px;
	padding: 7px 15px 0 15px;
        float:left;
}

.header-content ul {
	margin: 0;
	float: right;
	list-style: none;
	padding: 5px 15px 0 15px;
}

.header-content ul li {
	padding-left: 10px;
	display: inline;
}

.header-content ul li a, a:visited {
	color: #404040;
	font-size: 14px;
	text-decoration: none;
}
<header>
		<div class="header-content">
			<p>Welcome, please sign or register</p>
			<ul>
				<li><a href="#">My Account</a></li>
				<li><a href="#">Gift Cards</a></li>
				<li><a href="#">Customer Care</a></li>
				<li><a href="#">Community</a></li>
			</ul>
		</div>
	</header>

于 2015-08-11T14:36:29.497 に答える