knot22 knot22 - 4 months ago 5
HTML Question

aligning a list with a label

Here is an example of a label followed by a list which is contained within a span. The intention is to have the list appear beside the label rather than underneath. In this example the first list item, "backups", should appear on the same line as the label "path contents:". How can this be achieved?



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

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

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





Note that the CSS includes borders for the ul and label to improve visibility of those elements in this example.

Answer

Use display: inline-block;, vertical-align: top; and magin: 0 on both label and ul:

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

label {
    	display: inline-block;
        vertical-align: top;
    	width: 100px;
        border: solid red 1px;
    }
li.file:hover {
    	text-decoration: underline;
    }
<!DOCTYPE HTML>
<html>
    <body>
    	<div>		
    		<label id="dynamicLbl_pathcontents">path contents:</label>
	    	<span id="PathContents">
	        	<ul>
		        	<li>backups</li>
	            		<li>FilesAndFolders.php</li>
           		</ul>
         	</span>
    	</div>
    </body>
</html>