2016-08-09 80 views
0

Ich erstelle meinen benutzerdefinierten Assistenten. Ich versuche einfach ein "eingekreistes div" in meine Tabs zu legen. Allerdings sind meine Tabs horizontal während meine cirdcled div sind .. hässlichWarum sind meine eingekreisten div nicht inline mit dem Rest von li?

https://jsfiddle.net/sme79azj/

html:

<ul> 
     <li> 
      <a><div class="wizard-steps-number"> 
       <span class="number">1</span> 
      </div>Step number 1</a> 
     </li> 
     <li> 
      <a><div class="wizard-steps-number">2</div>Step number 2</a></li> 
</ul>       

Css

ul{ 
     list-style: none; 
     padding: 0px; } 
li { 
     border: solid 1px lightgrey; 
     cursor: default; 
     color:black; 
     display: inline; 
     height:82px; 
     font-size: 12px; 
     margin: 0px; 
     opacity: 0.5; 
     padding-top: 15px; 
     padding-bottom: 15px; 
     padding-left: 25px; 
     padding-right: 25px; 

    } 
.wizard-steps-number {  
    border-radius:1em; 
    border:solid 1px grey; 
    height:2em; 
    font-size:2em; 
    line-height:2em; 
    text-align:center; 
    color:black; 
    white-space: nowrap; 
    width:2em;} 
+0

Vielleicht ein Bild von dem beabsichtigten Ergebnis wissen lassen, wäre sinnvoll. Ich habe Schwierigkeiten zu bestimmen, wofür du im Moment bist. – MassDebates

+0

'hässlich' ist nicht genug der Erklärung auf das, was Sie erreichen wollen –

Antwort

2

Einige Eigenschaften können nur auf Blockebene Elemente angewendet werden. Wenn Sie sie auf inline Elemente anwenden möchten, dann machen Sie zuerst inline Elemente inline-block.

ändern display: inline-display: inline-block für li und es wird mit geringfügigen anderen Änderungen arbeitet, wie unten dargestellt:

ul{ 
 
    list-style: none; 
 
    padding: 0px; 
 

 
} 
 
ul li { 
 
    border: solid 1px lightgrey; 
 
    cursor: default; 
 
    color:black; 
 
    display: inline-block; 
 
    height:82px; 
 
    font-size: 12px; 
 
    margin: 0px; 
 
    opacity: 0.5; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 25px; 
 
    padding-right: 25px; 
 
    vertical-align: top; 
 
} 
 

 
.wizard-steps-number {  
 
    border-radius:1em; 
 
    border:solid 1px grey; 
 
    height:2em; 
 
    margin: 0 auto; 
 
    font-size:2em; 
 

 
    line-height:2em; 
 
    text-align:center; 
 

 
    color:black; 
 
    white-space: nowrap; 
 
    width:2em; 
 

 
}
<h1> 
 
    My wizard doesn't have circle inline... :-(
 
</h1> 
 

 
<ul> 
 
    <li><a><div class="wizard-steps-number"><span class="number">1</span></div>Step number 1</a></li> 
 
    <li><a><div class="wizard-steps-number">2</div>Step number 2</a></li> 
 

 
</ul>

0

ohne weitere Erklärung über das, was ‚hässlich‘ bedeutet, habe ich diese Schnipsel. es Hoffnung ist das, was Sie suchen ... mich

Verwendung display:inline-block auf der li und margin:0 auto die Kreise zum Zentrum

ul{ 
 
     list-style: none; 
 
    padding: 0px; 
 

 
} 
 
li { 
 
     border: solid 1px lightgrey; 
 
     cursor: default; 
 
     color:black; 
 
     display: inline-block; 
 
     height:82px; 
 
     font-size: 12px; 
 
     margin: 0px; 
 
     opacity: 0.5; 
 
     padding-top: 15px; 
 
     padding-bottom: 15px; 
 
     padding-left: 25px; 
 
     padding-right: 25px; 
 

 
    } 
 

 
.wizard-steps-number {  
 
     border-radius:1em; 
 
    border:solid 1px grey; 
 
    height:2em; 
 
    
 
    font-size:2em; 
 

 
    line-height:2em; 
 
    text-align:center; 
 
    
 
    color:black; 
 
    white-space: nowrap; 
 
    width:2em; 
 
    margin:0 auto; 
 

 
}
<h1> 
 
My wizard doesn't have circle inline... :-(
 
</h1> 
 

 
<ul> 
 

 

 
<li><a><div class="wizard-steps-number"><span class="number">1</span></div>Step number 1</a></li> 
 
<li><a><div class="wizard-steps-number">2</div>Step number 2</a></li> 
 
          
 
          </ul>

+0

Wenn Sie wieder die OP-Frage und dann meine Antwort lesen würden, werden Sie sehen, dass ich nicht gesagt habe, was er tut, ist hässlich. Er benutzte diesen Ausdruck (hässlich), um sein Problem zu beschreiben, und ich sagte nur, ich verstehe nicht, worauf er sich bezieht, wenn er "hässlich" sagt. Bitte ... bevor Sie kommentieren, lesen Sie aufmerksam. danke –

+0

ok. Anstatt sich für den unhöflichen Kommentar zu entschuldigen, hast du ihn gelöscht. nett –