将列表与标签对齐

以下是一个标签后面跟着一个包含在一个范围内的列表的示例。目的是让列表出现在标签旁边而不是下面。在这个例子中，第一个列表项“备份”应该与标签“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

将列表与标签对齐

回答

相关问题