リストをラベルと整列する

ラベルの例として、スパン内に含まれるリストがあります。ラベルの下に表示されるのではなくラベルの横にリストを表示することです。この例では、最初のリスト項目 "backups"はラベル "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

使用display: inline-block;、labelとulの両方で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

vertical-alignは、インラインブロック要素の垂直方向の配置を決定します。 'bottom'の' top'はそれに応じてインラインブロック要素を整列させます。 'bottom'はこれらの要素の下限を整列させます。（BTW、デフォルトは 'baseline' - インクルードされたテキストのベースラインに沿った位置合わせです） – 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

リストをラベルと整列する

答えて

関連する問題