Question

词语比我希望他们在我的＆＃34; .article＆＃34;中更加偏向正确。我希望它们对着它们所在元素的最左侧，但是当我尝试调整填充时，它会移动整个元素而不仅仅是单词。我应该如何解决这个问题？

CSS：

＆＃13;

/* 
   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;
}

＆＃13;

HTML：

＆＃13;

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Revisions Bookstore &amp; 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 &amp; 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: &ldquo;Fitness in the Stacks&rdquo; 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>

＆＃13;

Answer 1

调整<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; */
   ...
}

https://jsfiddle.net/h4fw6y3g/

如何将单词移近边距的一边

1 个答案: