如何將單詞靠近邊緣的一邊

單詞比我希望它們位於我的「.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 &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>

來源

2017-02-14 Skry Blackfall

調整你的<aside>左旁，加上寬度的d你的<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/

來源

2017-02-14 04:46:29

對不起，我不明白。你是如何改變單詞的放置位置的？就像你做了我想做的事，但我不知道你是如何做到的。 –

如果你看看上面的代碼塊，你會發現我改變了'article'的'width'和'padding'，'aside'也改變了'margin'。 –

當你有兩個值（即'邊距：0px25px;'它實際上是閱讀：'邊距：0px25px0px25px'，其中'25px'意味着左和右） –

如何將單詞靠近邊緣的一邊

回答

相關問題