爲什麼span.details中的保證金無法使用？

span.details中的單詞不在a.prod-buy和 a.prod_details的中心，我想將單詞add to cart和book info稍微與margin:2px 0 0 2px;一起移入span.details中。
爲什麼它不能工作？爲什麼span.details中的保證金無法使用？

div.center_prod_box { 
 
    border:1px dashed black; 
 
    float:left; 
 
    width:173px; 
 
    height:auto; 
 
    text-align:center; 
 
    } 
 

 
span.reduce { 
 
    text-decoration:line-through; 
 
    } 
 

 
div.prod_details_tab{ 
 
    clear:both; 
 
    width:180; 
 
    height:40px; 
 
    border:1px solid red; 
 
    } 
 

 
a.prod_buy,a.prod_details { 
 
    width:75px; 
 
    height:24px; 
 
    background:url(images/link_bg.gif) no-repeat center; 
 
    font-size:12px; 
 
    margin:10px 10px 0 0; 
 
    dispaly:block; 
 
    float:left; 
 
    border:1px solid red; 
 
    } 
 

 
span.details { 
 
    border:1px solid red; 
 
    margin:2px 0 0 2px; 
 
    }

<html> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <body> 
 
     <div class="prod_box"> 
 
      <div class="center_prod_box"> 
 
       <div class="product_title"> 
 
        <p>book name</p> 
 
       </div> 
 
       <div class="product_img"> 
 
        <img src="images/book1.jpg" /> 
 
       </div> 
 
       <div class="prod_price"> 
 
        <span class="reduce">&yen;36</span> <span class="price">&yen;31</span> 
 
       </div> 
 
      </div> 
 
      <div class="prod_details_tab"> 
 
       <a class="prod_buy"> 
 
        <span class="details">add to cart</span> 
 
       </a> 
 
       <a class="prod_details"> 
 
        <span class="details">book info</span> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2016-04-23 it_is_a_literature

好第一關它會幫助正確拼寫的CSS屬性。因此'dispaly：block;'應該是'display：block;' –

span是在一個錨點內，爲什麼不只用添加的填充來設置錨點？ –

添加display: inline-block跨越的CSS。

div.center_prod_box { 
 
    border:1px dashed black; 
 
    float:left; 
 
    width:173px; 
 
    height:auto; 
 
    text-align:center; 
 
    } 
 

 
span.reduce { 
 
    text-decoration:line-through; 
 
    } 
 

 
div.prod_details_tab{ 
 
    clear:both; 
 
    width:180; 
 
    height:40px; 
 
    border:1px solid red; 
 
    } 
 

 
a.prod_buy,a.prod_details { 
 
    width:75px; 
 
    height:24px; 
 
    background:url(images/link_bg.gif) no-repeat center; 
 
    font-size:12px; 
 
    margin:10px 10px 0 0; 
 
    dispaly:block; 
 
    float:left; 
 
    border:1px solid red; 
 
    } 
 

 
span.details { 
 
    display: inline-block; 
 
    border:1px solid red; 
 
    margin:2px 0 0 2px; 
 
    }

<html> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <body> 
 
     <div class="prod_box"> 
 
      <div class="center_prod_box"> 
 
       <div class="product_title"> 
 
        <p>book name</p> 
 
       </div> 
 
       <div class="product_img"> 
 
        <img src="images/book1.jpg" /> 
 
       </div> 
 
       <div class="prod_price"> 
 
        <span class="reduce">&yen;36</span> <span class="price">&yen;31</span> 
 
       </div> 
 
      </div> 
 
      <div class="prod_details_tab"> 
 
       <a class="prod_buy"> 
 
        <span class="details">add to cart</span> 
 
       </a> 
 
       <a class="prod_details"> 
 
        <span class="details">book info</span> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2016-04-23 03:17:34 Harish

添加padding-left的跨度移動文本2px。

div.center_prod_box { 
 
    border:1px dashed black; 
 
    float:left; 
 
    width:173px; 
 
    height:auto; 
 
    text-align:center; 
 
    } 
 

 
span.reduce { 
 
    text-decoration:line-through; 
 
    } 
 

 
div.prod_details_tab{ 
 
    clear:both; 
 
    width:180; 
 
    height:40px; 
 
    border:1px solid red; 
 
    } 
 

 
a.prod_buy,a.prod_details { 
 
    width:75px; 
 
    height:24px; 
 
    background:url(images/link_bg.gif) no-repeat center; 
 
    font-size:12px; 
 
    margin:10px 10px 0 0; 
 
    dispaly:block; 
 
    float:left; 
 
    border:1px solid red; 
 
    } 
 

 
span.details { 
 
    border:1px solid red; 
 
    margin:2px 0 0 2px; 
 
    padding-left: 2px; 
 
    }

<html> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <body> 
 
     <div class="prod_box"> 
 
      <div class="center_prod_box"> 
 
       <div class="product_title"> 
 
        <p>book name</p> 
 
       </div> 
 
       <div class="product_img"> 
 
        <img src="images/book1.jpg" /> 
 
       </div> 
 
       <div class="prod_price"> 
 
        <span class="reduce">&yen;36</span> <span class="price">&yen;31</span> 
 
       </div> 
 
      </div> 
 
      <div class="prod_details_tab"> 
 
       <a class="prod_buy"> 
 
        <span class="details">add to cart</span> 
 
       </a> 
 
       <a class="prod_details"> 
 
        <span class="details">book info</span> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2016-04-23 03:39:42

爲什麼span.details中的保證金無法使用？

回答

相關問題