2 weixin 38422826 weixin_38422826 于 2017.09.06 09:59 提问

设置<ul>中圆点和文本的相对位置

图片说明
我在网上做html和css习题 要求文本在框子里面居中 圆点处在

元素的下端。

但是。。。。。。我制作的ul效果如下图。
图片说明
代码是这么写的:

div.advertisement ul li a{ display: block; color: rgb(211,83,59); font-size: 20px; text-decoration: none; vertical-align: middle; } div.advertisement ul li { 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; }
我的想法是在ul中加入line-height属性调整圆点和文本的整体高度,然后再在li中设置line-height属性单纯调整文本的高度,可是我在li中进行了设置之后圆点也跟着跑了.
我也曾经尝试过在li中加入line-height属性调整圆点和文本的整体高度,在a中加入line-height属性调整文本的高度,可是在a进行了line-height属性设置之后圆点的位置还是发生了变化。
大家有没有什么好的方法去实现题目中的效果?

4个回答

sunny_desmond
sunny_desmond   2017.09.06 15:24

简单一点的话,直接用list-style:none把li的样式去掉,然后给li设置伪类before,,然后自己画一个点,就行啦~

sunny_desmond
sunny_desmond 回复weixin_38422826: 给li设置position:relative,伪类设置position:absolute;top:50%;left:0
2 个月之前 回复
weixin_38422826
weixin_38422826 刚才试了 结果导致了这个点加入到了li元素文本的顶头了。把文本挤下来了 挤到了li文本框子的外侧了。
2 个月之前 回复
weixin_38422826
weixin_38422826   2017.09.08 14:24

问题已经解决了 采取的做法是在广告对应的div中再加入一个无序列表,无序列表不插入任何东西,就留下来个圆点。调整这个无序列表的定位让它与广告栏的无序列表充齐,然后通过调整圆点的line-height(字体高度)属性从而调整它的位置。

paopao_2017
paopao_2017   2017.09.19 14:27

我看懂了你的代码,也看懂了你的意思,原因在于你的思维还没有清晰,没事,多练习,多巩固,一点一点累积,我改了一下你的css代码,希望能帮助到你。

 <style>
        div.advertisement ul li a {
            display: block;
            color: rgb(211, 83, 59);
            font-size: 20px;
            text-decoration: none;
            vertical-align: middle;
            line-height: 46px;
        }

        div.advertisement ul li {
            text-align: center;
            border: 1px solid rgb(211, 83, 59);
            background-color: rgb(241, 241, 241);
        }
    </style>
paopao_2017
paopao_2017 补充:vertical-align: middle;也可以去掉,主要在于line-height
大约 2 个月之前 回复
cal_cen
cal_cen   2017.09.06 14:36

试试 vertical-align: text-bottom; 好用不

weixin_38422826
weixin_38422826 如果使用vertical-align会导致文本高度也发生变化。
2 个月之前 回复
cal_cen
cal_cen 我也不是太确定啊,没试过
2 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片