Question

以下是标签后面跟一个包含在范围内的列表的示例。目的是让列表出现在标签旁边而不是下面。在此示例中，第一个列表项“backups”应与标签“path contents：”出现在同一行。如何实现这一目标？

    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>

请注意，CSS包含ul和label的边框，以提高此示例中这些元素的可见性。

Answer 1

在void InstantiateBlocks() { var parent = GameObject.Find("Table").transform; int lastId = 0, sameBlock = 0; int _x = 0, _y = 0; for (int y = -2; y <= 3; y++) { for (int x = -4; x < 4; x++) { if (Random.Range(0f, 1f) < 0.8) { if (sameBlock == 0) lastId = Random.Range(0, blocks.Count); else if (sameBlock >= Random.Range(1, 3)) { sameBlock = 1; var _id = lastId; while (lastId == _id) lastId = Random.Range(0, blocks.Count); } else sameBlock--; var b = Instantiate(blocks[lastId]); b.transform.SetParent(parent, false); b.transform.position = new Vector3(x, y, 0f); blocksArray[_x, _y] = b.GetComponent<MinigameBlock>(); sameBlock++; } _x++; } _y++; _x = 0; } }和display: inline-block;上使用vertical-align: top;，magin: 0和label：

＆＃13;

ul

＆＃13;

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;
    }

＆＃13;

Answer 2

这应该在没有vertical-align

的情况下进行

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 3

您也可以使用flex进行对齐。

＆＃13;

div{
  display:flex;
  align-items: baseline;
}

    ul
    {
    	list-style-type: none;
        border: solid green 1px;
    }

    label
    {
    	display: inline-block;
    	width: 100px;
        border: solid red 1px;
    }

     li.file:hover
    {
    	text-decoration: underline;
    }

＆＃13;

<!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>

＆＃13;

将列表与标签对齐

3 个答案: