Warum kann die Marge in span.details nicht funktionieren?

Die Worte in der span.details sind nicht in der Mitte von a.prod-buy und a.prod_details, ich möchte die Worte add to cart und book info ein wenig mit margin:2px 0 0 2px; in span.details verschieben.
warum kann es nicht funktionieren?Warum kann die Marge in span.details nicht funktionieren?

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>

Quelle

2016-04-23 it_is_a_literature

Nun zunächst einmal, es wäre richtig helfen die CSS-Eigenschaften zu buchstabieren. Also 'dispaly: block;' sollte 'display: block;' sein –

Die Spannweite ist in einem Anker, warum nicht einfach den Anker mit zusätzlicher Polsterung stylen? –

hinzufügen display: inline-block CSS ist zu überspannen.

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>

Quelle

2016-04-23 03:17:34 Harish

padding-left auf die Spanne In dem Text 2px zu bewegen.

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>

Quelle

2016-04-23 03:39:42

Warum kann die Marge in span.details nicht funktionieren?

Antwort

Verwandte Themen