单词比我希望它们在我的“.article”元素中更靠右，我希望它们靠在它们所在元素的最左侧，但是当我尝试调整填充时它移动整个元素而不仅仅是单词。我该如何补救？
CSS:
/*
Revisions Bookstore and Cafe style sheet
Filename: styles.css
Author: Justus Self
Date: 2/13/2017
HTML5 and CSS3 Illustrated Unit D, Visual Workshop
*/
/* body and page container */
body {
background-color: floralwhite;
}
.container {
background-color: burlywood;
max-width: 80%;
max-height: 100%;
border: .2em solid black;
margin: 0 auto;
}
/* headings */
header {
text-align: center;
font-size: 18px;
color: navy;
background-color: lightblue;
padding: .01em;
}
/* main content */
article {
background-color: white;
font-size: 16px;
width: 63%;
float: right;
clear: left;
padding: 0 7%;
}
/* sidebar */
aside {
background-color: burlywood;
width: 20%;
margin: 0px 25px;
height: 195px;
font-size: 18px;
}
/* footer section */
footer {
color: navy;
background-color: lightblue;
text-align: right;
padding: .1% 1%;
margin-top: .2px;
line-height: 4px;
}HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Revisions Bookstore & Cafe</title>
<!--
Revisions Bookstore and Cafe main web page
Filename: index.html
Author: Justus Self
Date: 2/13/2017
HTML5 and CSS3 Illustrated Unit D, Visual Workshop
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Revisions Bookstore & Cafe</h1>
</header>
<article>
<h2>Upcoming Events</h2>
<p>Oct. 31: Spooky stories read aloud (for kids 2-12)</p>
<p>Nov. 2: Sam Miller reads from Lunchtime Chronicles</p>
<p>Nov. 3: Cookbook Reading Club monthly discussion</p>
<p>Nov. 4: “Fitness in the Stacks” Pilates class</p>
</article>
<aside>
<p>Custom brewed coffee and hand-selected books.</p>
<p>Special orders are our specialty.</p>
</aside>
<footer>
<p>412 N. 25th St.</p>
<p>Richmond, VA 23223</p>
<p>(804) 555-2565</p>
</footer>
</div>
</body>
</html>最佳答案
调整 <aside> 的左边距, 加上 <article> 的宽度和左边距.
当使用两个值作为填充/边距时，它是:顶部/底部和左侧/右侧。
当使用四个值作为填充/边距时，它是:右上角左下角。
article {
background-color: white;
font-size: 16px;
width: 73%; /* was: 63% */
float: right;
clear: left;
padding: 0 7% 0 0 ; /* was: 0 7%; */
}
aside {
background-color: burlywood;
width: 20%;
margin: 0 0 0 25px; /* was: 0px 25px; */
...
}
关于html - 如何将单词移近页边距的一侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42217961/