如何在<li>标签中设置此div和链接的样式？</li>

Question

<li> <div class="test"><a href="example">Dummy</a> </div></li>

我将li元素设置为风格，因此它具有一定的高度并填充整个屏幕宽度。问题是in in in假定与li>相同的垂直高度。我尝试添加填充或边距，它会在div和li之间创建一个间隙，但是如果有意义则增加li元素的高度。

1. 如何让div更小？垂直？它有一个背景颜色，这是我可以看到它占据的空间。

2. 其次，当我尝试在div内向右浮动锚时它不起作用？

3. 最后，我想在div中有一个img标签但是当我把它放在里面时，它可以正常工作，但是锚点链接会出现在它下面。

我知道似乎我什么都不知道，但这些东西似乎不在我的书中。任何帮助表示赞赏。

Answer 1

它应该工作 - 你只有一个小的语法错误，改变以下：

<div class="test" />

到

<div class="test">

你目前的方式，div不包含任何东西。 （如果您发布CSS课程.test我相信自己或某人会很乐意让您成为一个有效的榜样。）

示例：

Example（没有任何想法，你可能会寻找什么）

Answer 2

你的CSS对这个非常有帮助。

我可以告诉你的一点是，神秘高度可能是由于Box模型 - 这几乎是CSS和布局的90％。盒子模型规定某些东西的真实宽度或高度基于边距+边框+填充+内容。所以，如果你有一个CSS看起来像这样的元素：

div{margin:5px; border-width:1px; padding:5px; width:100px; height:100px;}

它的实际高度和宽度是122px ... 5px（左边距）+ 1px（左边框）+ 5px（左边距）+ 100px（内容）+ 5px（右边距）+ 1px（右边框）+ 5px（右边距）

我知道这并不能完全回答你的问题，但希望它能帮助你更好地了解正在发生的事情。所以再看看你的CSS，看看那个额外的高度/宽度来自哪里。

您可以详细了解包装盒型号：here。

**还有一些崩溃的边距，解释起来有点复杂，但你可以找到它们here