html - 在 html div 元素旁边对齐文本的最佳做法是什么

Question

我正在创建一个无序列表，在该列表中我想添加一个调色板类型窗口，我尝试通过以下方式创建一个

<ul><li><div style="width:10px; height:10px;  background-color:#0066cc; float:left;"></div>test</li></ul>

我正在附加一个小提琴链接以查看输出。有没有一种将 div 与文本对齐的好方法，或者我应该只调整 div 元素的边距，但我认为这不是最好的解决方案。

score 3 · Accepted Answer

在你的 div 上，设置：

text-align: center;
display: inline-block;
float: none;

这以与图像定位相同的方式定位 div。

score 0 · Accepted Answer

一般来说，拥有line-heightforli将是一个不错的选择。

从你的 JSfiddle，

li{
    line-height: 10px;   
}

看看这个JSFiddle。

2 回答 2