Ausrichten einer Liste mit einem Label

Hier ist ein Beispiel für ein Label gefolgt von einer Liste, die in einem Bereich enthalten ist. Die Absicht ist, dass die Liste neben dem Etikett und nicht darunter erscheint. In diesem Beispiel sollte das erste Listenelement "Backups" in derselben Zeile wie das Label "path contents:" erscheinen. Wie kann dies erreicht werden?Ausrichten einer Liste mit einem Label

ul 
 
    { 
 
    \t list-style-type: none; 
 
     border: solid green 1px; 
 
    } 
 

 
    label 
 
    { 
 
    \t display: inline-block; 
 
    \t width: 100px; 
 
     border: solid red 1px; 
 
    }

<!DOCTYPE HTML> 
 
<html> 
 
    <body> 
 
    \t <div> \t \t 
 
    \t \t <label id="dynamicLbl_pathcontents">path contents:</label> 
 
\t  \t <span id="PathContents"> 
 
\t   \t <ul> 
 
\t \t   \t <li>backups</li> 
 
\t    \t \t <li>FilesAndFolders.php</li> 
 
      \t \t </ul> 
 
      \t </span> 
 
    \t </div> 
 
    </body> 
 
</html>

beachten, dass die Grenzen für die CSS ul und Etiketten Sichtbarkeit dieser Elemente in diesem Beispiel zu verbessern, enthält.

Quelle

2016-07-31 knot22

Verwenden display: inline-block;, vertical-align: top; und magin: 0 sowohl label und ul:

ul { 
 
     display: inline-block; 
 
     vertical-align: top; 
 
    \t list-style-type: none; 
 
     border: solid green 1px; 
 
     margin: 0; 
 
    } 
 

 
label { 
 
    \t display: inline-block; 
 
     vertical-align: top; 
 
    \t width: 100px; 
 
     border: solid red 1px; 
 
    } 
 
li.file:hover { 
 
    \t text-decoration: underline; 
 
    }

<!DOCTYPE HTML> 
 
<html> 
 
    <body> 
 
    \t <div> \t \t 
 
    \t \t <label id="dynamicLbl_pathcontents">path contents:</label> 
 
\t  \t <span id="PathContents"> 
 
\t   \t <ul> 
 
\t \t   \t <li>backups</li> 
 
\t    \t \t <li>FilesAndFolders.php</li> 
 
      \t \t </ul> 
 
      \t </span> 
 
    \t </div> 
 
    </body> 
 
</html>

Quelle

2016-07-31 12:44:46 Johannes

Was ist der Zweck der 'vertical-align: top;' für das Label? – knot22

vertical-align bestimmt die vertikale Ausrichtung von Inline-Blockelementen. "top" von "bottom" richtet Inline-Block-Elemente entsprechend aus - so würde "bottom" die unteren Ränder dieser Elemente ausrichten. (BTW, der Standardwert ist 'baseline' - Ausrichtung entlang der Grundlinie des enthaltenen Textes) – Johannes

Dieses es ohne vertical-align

tun sollten

ul { 
 
    list-style-type: none; 
 
    border: solid green 1px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 100px; 
 
    border: solid red 1px; 
 
    float: left; 
 
} 
 

 
li.file:hover { 
 
    text-decoration: underline; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
    <body> 
 
    \t <div> \t \t 
 
    \t \t <label id="dynamicLbl_pathcontents">path contents:</label> 
 
\t  \t <span id="PathContents"> 
 
\t   \t <ul> 
 
\t \t   \t <li>backups</li> 
 
\t    \t \t <li>FilesAndFolders.php</li> 
 
      \t \t </ul> 
 
      \t </span> 
 
    \t </div> 
 
    </body> 
 
</html>

Quelle

2016-07-31 12:51:01 David

Sie können auch unter Verwendung von flex ausrichten.

div{ 
 
    display:flex; 
 
    align-items: baseline; 
 
} 
 

 
    ul 
 
    { 
 
    \t list-style-type: none; 
 
     border: solid green 1px; 
 
    } 
 

 
    label 
 
    { 
 
    \t display: inline-block; 
 
    \t width: 100px; 
 
     border: solid red 1px; 
 
    } 
 

 
    li.file:hover 
 
    { 
 
    \t text-decoration: underline; 
 
    }

<!DOCTYPE HTML> 
 
<html> 
 
    <body> 
 
    \t <div> \t \t 
 
    \t \t <label id="dynamicLbl_pathcontents">path contents:</label> 
 
\t  \t <span id="PathContents"> 
 
\t   \t <ul> 
 
\t \t   \t <li>backups</li> 
 
\t    \t \t <li>FilesAndFolders.php</li> 
 
      \t \t </ul> 
 
      \t </span> 
 
    \t </div> 
 
    </body> 
 
</html>

Quelle

2016-07-31 12:51:05

Ausrichten einer Liste mit einem Label

Antwort

Verwandte Themen