61,112
社区成员
发帖
与我相关
我的任务
分享ul中设定圆点的位置
题目要求设计一个这样子的导航栏。
而我设计的竟然是这样子的。
写的代码如下：
<style>
div.advertisement ul{
line-height:45px;
}
div.advertisement ul li a{
display: block;
color: rgb(211,83,59);
font-size: 20px;
text-decoration: none;
vertical-align: middle;
font-size: 22px;
}
div.advertisement ul li {
width: 135px;
font-size:4px;
text-align: center;
border: 1px solid rgb(211,83,59);
background-color: rgb(241,241,241);
margin-top:3px;
height: 34px;
line-height:46px;
}
</style>
<body>
<div class="advertisement">
<ul>
<li><a href="#Diamond">广告位招租</a></li>
<li><a href="#Emerald">广告位招租</a></li>
</ul>
</div>
</body>
我要做到的是让文本在li属性的框子内居中 圆点放在下面。具体的做法是在ul标签中设置line-height属性 让圆点和文本一起下降高度 然后通过li的line-height属性 修改文本的位置，可是li设置了line-height之后圆点和文本的位置一同改变了。
我也试过在li设置line-height属性 改变圆点和文本的位置 然后在a设置line-height属性改变文本的位置 可是在a中设置的line-height属性依然同事改变了圆点的位置。
牛人有什么建议。
...全文
请发表友善的回复…
发表回复
浪子回头8 2017-09-12
- 打赏
- 举报
用背景图片会更随意一些
daswcszxw 2017-09-08
- 打赏
- 举报
首先先reset 默认样式。
li,ul{list-style:none}
八云麻美子 2017-09-08
- 打赏
- 举报
定位吧...大概
weixin_38422826 2017-09-08
- 打赏
- 举报
问题已经解决了 采取的做法是在广告对应的div中再加入一个无序列表，无序列表不插入任何东西，就留下来个圆点。然后通过调整圆点的line-height（字体高度）属性从而调整它的位置。
