выравнивание списка с меткой

Ниже приведен пример ярлыка, за которым следует список, который содержится в пределах диапазона. Цель состоит в том, чтобы список появился рядом с меткой, а не снизу. В этом примере первый элемент списка, «резервные копии», должен появиться в той же строке, что и метка «содержимое пути:». Как это можно достичь?выравнивание списка с меткой

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>

Обратите внимание, что УС включает в себя границы для ул и этикетки, чтобы улучшить видимость этих элементов в этом примере.

источник

2016-07-31 knot22

Использование display: inline-block;, vertical-align: top; и magin: 0 на обоих label и 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>

источник

2016-07-31 12:44:46 Johannes

Какова цель 'вертикального выравнивания: сверху;' на этикетке? – knot22

vertical-align определяет вертикальное выравнивание элементов встроенного блока. 'top'' bottom' будет выравнивать элементы строкового блока соответственно, поэтому '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

выравнивание списка с меткой

ответ

Смежные вопросы