Question

代码来自两个不同的来源，我会追加，但我没有10个代表发布它们。

First attempt。请注意可怕放置的单选按钮。

Second attempt。我不知道消息来源，这是一个直接的谷歌结果。注意顶部和底部填充/对齐之间的区别。

我尝试使用[li]元素，但它没有用。

将img{display: block;}添加到CSS会产生意外结果。它＆＃34;填充＆＃34;图像的整个元素，图像的左侧部分隐藏在绿色部分后面。

我是一个自称为CSS / HTML的菜鸟，我可以理解一些事情并做一些简单的事情，但放置/对齐对我来说仍然是一个谜。

我想知道这段代码的工作原理。我计划为＆＃34;选择＆＃34;添加绿色边框。＆＃34;按钮＆＃34;并改变一些小的视觉材料。我也想知道如何使＆＃34; tick＆＃34;并实施＆＃34; tick＆＃34;在本地/全球标记，而不是依赖content:'\2714';。

帮助我了解这里发生了什么，以及如何解决这个问题（并在将来应用这些知识）。

编辑：更新了第二次尝试，看起来相当不错，imho。只有当对齐被修复.... 叹息。

Answer 1

好吧，这听起来真的很傻......

我补充说：

img
{
  display:block;
  margin: 5px 5px 5px 45px;
}

并编辑了边距...它现在正常工作。

但我仍然不明白为什么底部有那么糟糕的空间。

**编辑：**还通过添加line-height: 6;确定了刻度线位置。

Answer 2

我不确定我是否正确理解，但我们走了：我用这种方式将盒子集中在一起

top: 50%;
margin-top: -20px; (minus half the height of the element)
height: 40px;