將列表與標籤對齊

以下是一個標籤後面跟着一個包含在一個範圍內的列表的示例。目的是讓列表出現在標籤旁邊而不是下面。在這個例子中，第一個列表項「備份」應該與標籤「path contents：」出現在同一行。這怎麼能實現？將列表與標籤對齊

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>

注意，CSS包括UL和標籤，以提高在這個例子中這些元素的可見性邊界。

來源

2016-07-31 knot22

兩個label和ul使用display: inline-block;，vertical-align: top;和magin: 0：

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>

來源

2016-07-31 12:44:46 Johannes

什麼是'垂直對齊的目的：頂部;'的標籤嗎？ – knot22

垂直對齊確定內嵌塊元素的垂直對齊。「底部」的「頂部」將相應地對齊內嵌塊元素 - 因此「底部」將對齊這些元素的底部邊界。（順便說一下，默認值是「基線」 - 沿所包含文本的基線對齊） – Johannes

這應做到不vertical-align

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>

來源

2016-07-31 12:51:01 David

您也可以使用flex對齊。

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>

來源

2016-07-31 12:51:05

將列表與標籤對齊

回答

相關問題