设置<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属性设置之后圆点的位置还是发生了变化。
大家有没有什么好的方法去实现题目中的效果?
0

4个回答

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

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

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

1

我看懂了你的代码,也看懂了你的意思,原因在于你的思维还没有清晰,没事,多练习,多巩固,一点一点累积,我改了一下你的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>
1
paopao_2017
paopao_2017 补充:vertical-align: middle;也可以去掉,主要在于line-height
一年多之前 回复

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

0
weixin_38422826
weixin_38422826 如果使用vertical-align会导致文本高度也发生变化。
一年多之前 回复
cal_cen
一缕琴音映斜阳 我也不是太确定啊,没试过
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
ul的li里小点点啊去掉了,小点点的位置依然存在,消去小点点的位置,ul设置个padding:0;
&amp;lt;div&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;1&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;3&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;2&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;4&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt
css中去掉列表ul中的圆点
去掉圆点只需要一句代码就好: ul { list-style-type: none; } list-style-type属性是设置列表前面标志的类型,详细信息可以查看这个链接 http://www.runoob.com/cssref/pr-list-style-type.html ...
ul li 定制圆点,list-style-image调整图片圆点大小 与 文字和图片排版
今天我们要介绍两种前端要用到的布局:第一种是ul li定制化圆点的样式,然后使其与文字居中排列,另外一种是文字与图片混排并居中排版。 我们在使用ul li中通常会定制化圆点,使用如下代码就可以使圆点为自己设定的图片,然后调整圆点的对齐的像素 ul li{ list-style-type:none; background:url("img/ui.png") no-repeat 0rem 0.3rem; background-
用CSS除去UL标签小圆点
去除圆点 给li设置样式 :  在style中设置: list-style-type:none 就把每个li前面的圆点去掉了
HTML5 ul li 去前面的圆点 和 横排
HTML5 ul li 去前面的圆点 和 横排 li{ list-style-type: none; //去圆点 float: left; //横排 }
li 的圆点失效
今天写代码的时候,遇到一个问题了,就是ul li里的圆点失效,百度了一些解决办法, 网上主要说一种是li属性设置了list-style-position:outside;列表符号的位置在盒模型之外,所以第二个列表项的符号被第一个列表项盖住,或者被前面的框架覆盖,所以就看不到效果,还有一种情况就是li元素设置了float:left;属性也会造成LI元素不正常。 他们的解决方案是第一种情况直接修改l
如何修改html中列表项li所显示的圆点的颜色?,以及相关样式的设定
这是li标签自带的圆点的颜色改变,代码如下:.centerbt li{ content:&quot;.&quot;;   color:gray;    }在标签li后面加入“@”符号,这里都会使用position,这样可以调整位置。 .centerbt li:after{ content:&quot;@&quot;;   color:gray; position:relative; left:200px; botto...
ul中设定圆点的位置
[img=https://img-bbs.csdn.net/upload/201709/06/1504678455_806825.jpg][/img]rn题目要求设计一个这样子的导航栏。rnrn而我设计的竟然是这样子的。[img=https://img-bbs.csdn.net/upload/201709/06/1504678497_268153.jpg][/img]rn写的代码如下:rn rnrnrn rn rn 广告位招租rn 广告位招租rnrnrn rnrn我要做到的是让文本在li属性的框子内居中 圆点放在下面。具体的做法是在ul标签中设置line-height属性 让圆点和文本一起下降高度 然后通过li的line-height属性 修改文本的位置,可是li设置了line-height之后圆点和文本的位置一同改变了。rn我也试过在li设置line-height属性 改变圆点和文本的位置 然后在a设置line-height属性改变文本的位置 可是在a中设置的line-height属性依然同事改变了圆点的位置。rnrn牛人有什么建议。
ul列表横向排版及删除li圆点
ul默认排版: &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;/&amp;gt; &amp;lt;style&amp;gt; .good{ } &amp;lt;/style&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li clas
如何将li的前面那个圆点去掉
只需要将 css样式 的 list-style-type 属性设置为none即可    代码如下 list-style-type:none; #two li{ list-style-type:none; width:150px; } 下面的代码位于标签内 我是新手
css 如何控制ul元素list-style-type:disc点的大小
1. 方式一:通过设置li的font-size的值来实现改变disc点的大小&amp;lt;li style=&quot;font-size:20px;&quot;&amp;gt;&amp;lt;a style=&quot;font-size:10px;&quot;&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;2. 方式二:通过使用before伪类来自定义disc点的大小&amp;lt;!DOCTPYE html&amp;gt; &amp;lt;html&amp;
如何给li前的圆点添加背景颜色
如何给li前的圆点添加背景颜色
HTML——关于li的圆点样式变换
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;关于ul-li前圆点样式的更换&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; div{
安卓设置文本与图片相对位置
手工设置文本与图片相对位置时,常用到如下方法:    setCompoundDrawables(left, top, right, bottom)  Drawable  drawable1= getResources().getDrawable(R.drawable.button);  drawble1.setBounds( 0, 0, drawable1.getMinimumWi
html中ul li前面小黑点样式 ul li一些样式
对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除。 1、在CSS中写入代码。找到相关性的CSS,在。.li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。 2、在相关的页面找到head部分写入下面的代码 lis
滚动和div标签位置和li标签的相对定位,并进行重叠
这里是滚动的文字                                                                                                                                                                                      
html中相对位置与绝对位置
用户在浏览网站时经常会看到左侧有一种宣传栏,它不会随着鼠标滚动而不被用户看到,它会始终以页面的中心为参照物始终保持在左侧一个固定的位置,今天我们来做一下这个小例子,让我们先了解一下盒模型和相对丶绝对位置的前端知识。盒模型分为两种一种是标准模型,另一种是IE模型,它的组成由外向里是margin,border,padding,content,如下两个图所示。标准模型,宽高均为内容(content)的宽...
图形剖析,当给 ul 设置padding=0, margin=0后 li前面的小黑点消失的现象原理!
-
ul li 的属性值 去掉li的圆点
list-style-type:disc(实心圆) | circle(空心圆)| square(实心方块)|none(没有)   用图片作为列表符号 list-style-image: url(../images/arror.jpg)   改变列表符号的位置: list-style-position: outside(外边) | inside(里面)   /* list-style...
1:ul居中文 2:字居中 3:去除ul和li前面的点
一、ul居中 1:给ul设置样式:然后ul设置为display:inline-block 2:给父节点设置样式:text-align:center 二、文字居中 设置line-height与标签height一样,则文字会上下居中 三、去除ul和li前面的点 style{ list-style:none; }
li 中a标签浮动在ie下造成的bug
li中a标签浮动会造成li之间有间隙 解决办法1: 是在li中加入vertical-align:middle;  可以完美解决这一问题 解决办法2:针对出现间隙的li针对性的写入margin-top:-   px;也可解决,适用于小范围的li标签。
关于去掉Li标签前面的小圆点和距离/显示下划线
解决方法 去掉Li标签前面的距离:     设置ul    padding:0px; 去掉Li标签前面的小圆点: 设置li      list-style-type:none; 显示下划线:     text-decoration:underline;
在代码中手动设置图片相对于TextView的位置
aa
LI标签在Ul中居中显示
这里用到了前面文章中的清除浮动的问题,值得一注意。先直接看一个例子吧:&lt;style&gt;*{margin:0;padding:0;}ul,ul li{list-style:none;}.clear:after{content:".";display:block;heigh
li前圆点换成图片
*{ font:12px/25px tahoma; } ul{ list-style-type:none; } li{ padding-left:20px; background:url(/article/upimages3/li.gif) no-repeat; }    苹果    梨      葡萄
【html/css】CSS中去掉li前面的圆点方法
在CSS中经常会使用到li标签,默认情况下使用li时,会在文字前面自动加上一个黑色的小圆点,有时候会觉得这个圆点多余,所以要去掉。下面介绍几种常用的方法。     方法一:      百度      雅虎      新浪      谷歌     方法二:  li {list-style-type:none;}      百度      雅虎
比较完整的轮播图,有箭头有小圆点点击,自动轮播
&amp;lt;style type=&quot;text/css&quot;&amp;gt;    * {      padding: 0;      margin: 0;      list-style: none;      border: 0;    }    .all {      width: 500px;      height: 200px;      padding: 7px;      border: 1px s...
div里ul出现位置偏差
设置left:-1px;(可根据偏差值设置),使用margin无效
ul与li的相对位置问题
rn我的代码如下,ul内的Li设置的margin与padding均为0,但显示出来li却在ul内偏右,搞不清为什么rn[code=HTML]rnrnrn rn rnrnrn rn About CISTrn rn rn Message from the Presidentrn rn rn Introductionrn rn rn Mottorn rn rn Cares and Supports from Leadersrn rn rn Secretaries of CPC and Presidentrn rn rn Evolution of CISTrn rn rn Infrastructure Constructionrn rn rn CIST's Futurern rn rn rnrnrn[/code]
ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理     第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构。代码是:&amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;&amp;lt;a href=&quot;1&quot;&amp;gt;首页&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;&amp;lt;a href=&quot;2&quot;&a
38行js+ 16行css+ul元素布局轻松搞定:滑动图(点击圆点切换)-淡入淡出 效果
1.先看效果图: 2.代码截图: 3.源代码: &amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &amp;lt;html xmlns=&quot;https://www.w3.org/1999/...
javascript中一些相对位置
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:...
在代码里面设置组件的相对位置
随时随地阅读更多技术实战干货,充分利用闲暇时间,请关注源代码社区公众号(ydmsq666)和技术交流群。 有时候需要在代码里创建组件,尤其是在相对布局中需要设置组件之间的相对位置,包括组件相对父容器的位置,组件之间的位置,至于组件内部排列方式是可以用setGravity来实现的。下面针对前两种情况进行浅析,代码如下: package com.home.testlayoutparams; ...
指定特定位置的圆点的显示
修改MPAndroidChart源码,实现绘制特定位置的圆点
设置div相对位置
先看一下效果,就是上面是个只有下边框的input输入框!要做的是下面选择日期的DIV始终在input文本框正下方。 html代码: 具体DIV内容省略不写了 CSS样式: .jnNav { background: #FFFFFF; border: 1px solid #B1B1B1; overflow: hidden; position: a
BannerLayoutSimple 支持图片无限轮播的 BannerLayout,支持自定义小圆点位置以及显示位置等等,反正支持的挺多的,源码也有注释
BannerLayoutSimple 支持图片无限轮播的 BannerLayout,支持自定义小圆点位置以及显示位置等等,反正支持的挺多的,源码也有注释
css ul li 图标 图片位置定位 背景定位
css ul li 图标 图片位置定位 背景定位  这是网站页面只有一张背景图片的时代 众多大型网站都是背景图片只用一整张这种模式  背景图片的定位应用广泛 .cases li{ lineheight:27px; background:url("images/lilili.gif") norepeat 2px 8px; paddingleft:10px; borderbott
通过position属性实现文本在页面中的任意位置
页面文本根据需求需要实现位置的自由设置,需要使用属性position来实现,Demo代码如下所示: position文本定位 h2.pos_abs{ position:absolute; left:150px; top:200px; } 内容未定位的所在位置 class="pos_abs">该内容所在位置是通过定义后的位置 通过绝对定位,元素可以放置到页面上的任何位置。
html 布局-相对位置及绝对位置
 来源:http://zhykhs.javaeye.com/blog/338563   Div + CSS Example, Wayhomes Blog  body,td,th{font-family:Verdana;font-size:9px;} -->     position: absolute;  top: 5px;  righ
设置控件与控件的相对位置
使用alignTop
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 python文本教程 java学习文本