• 关于

    word-spacing

    的搜索结果

回答

将ul的font-size设置为0,同时设置word-spacing和letter-spacing为负值,然后再设置li的字体大小.ul { font-size: 0; /* 以下两个属性的值根据你的具体情况而定 */ letter-spacing: -1px; word-spacing: -1px; } ul li { display: inline-block; width: 50px; height: 30px; color: #ffffff; font-size: 16px; letter-spacing: normal; word-spacing: normal; background-color: black; }

杨冬芳 2019-12-02 02:42:47 0 浏览量 回答数 0

问题

QTableWidget修改表头颜色的代码为什么只在QMainWindow中有效?-服务报错

montos 2020-05-31 15:27:47 0 浏览量 回答数 1

回答

因为标签之间有空白字符造成的。解决办法有很多,margin负值、font-size:0等等。去除inline-block元素间间距的N种方法 一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~表单控件之间的间距例子 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; } <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> inline-block水平元素间的间距示意 张鑫旭-鑫空间-鑫生活 您可以狠狠地点击这里:inline-block元素间间距demo 这种表现是符合规范的应该有的表现(如果有人认为是bug就太()ay ()oy 了)。 不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)! 二、方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以: <div class="space"> <a href="##"> 惆怅</a><a href="##"> 淡定</a><a href="##"> 热血</a> </div> 或者是: <div class="space"> <a href="##">惆怅</a ><a href="##">淡定</a ><a href="##">热血</a> </div> 或者是借助HTML注释: <div class="space"> <a href="##">惆怅</a><!-- --><a href="##">淡定</a><!-- --><a href="##">热血</a> </div> 等。 三、使用margin负值 .space a { display: inline-block; margin-right: -3px; } margin负值的大小与上下文的字体和文字大小相关,其中,间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格:inline-block元素间间隔大小与字体和文字大小之前的关系表截图 例如,对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。 由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。 四、让闭合标签吃胶囊 如下处理: <div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血</a> </div> 注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。 在HTML5中,我们直接: <div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血 </div> 好吧,虽然感觉上有点怪怪的,但是,这是OK的。 您可以狠狠地点击这里:无闭合标签去除inline-block元素间距demo 无闭合标签与inline-block水平元素间距的去除 张鑫旭-鑫空间-鑫生活 五、使用font-size:0 类似下面的代码: .space { font-size: 0; } .space a { font-size: 12px; } 这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加: 类似下面的代码: .space { font-size: 0; -webkit-text-size-adjust:none; } 您可以狠狠地点击这里(去年制作的一个简单demo):font-size:0清除换行符间隙demo 补充:根据小杜在评论中中的说法,目前Chrome浏览器已经取消了最小字体限制。因此,上面的-webkit-text-size-adjust:none;代码估计时日不多了。 六、使用letter-spacing 类似下面的代码: .space { letter-spacing: -3px; } .space a { letter-spacing: 0; } 根据我去年的测试,该方法可以搞定基本上所有浏览器,包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器,不过Opera浏览器下有蛋疼的问题:最小间距1像素,然后,letter-spacing再小就还原了。 七、使用word-spacing 类似下面代码: .space { word-spacing: -6px; } .space a { word-spacing: 0; } 一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。 您可以狠狠地点击这里:word-spacing与元素间距去除demo 与上面demo一样的效果,这里就不截图展示了。如果您使用Chrome浏览器,可能看到的是间距依旧存在。确实是有该问题,原因我是不清楚,不过我知道,可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。 .space { display: inline-table; word-spacing: -6px; } 八、其他成品方法 下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理): .yui3-g { letter-spacing: -0.31em; /* webkit */ *letter-spacing: normal; /* IE < 8 重置 */ word-spacing: -0.43em; /* IE < 8 && gecko */ } .yui3-u { display: inline-block; zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */ letter-spacing: normal; word-spacing: normal; vertical-align: top; } 以下是一个名叫RayM的人提供的方法: li { display:inline-block; background: orange; padding:10px; word-spacing:0; } ul { width:100%; display:table; /* 调教webkit*/ word-spacing:-1em; } .nav li { *display:inline;} 也就是上面一系列CSS方法的组组合合。

杨冬芳 2019-12-02 02:43:16 0 浏览量 回答数 0

阿里云高校特惠,助力学生创业梦!0元体验,快速入门云计算!

学生动手场景应用,快速了解并掌握云服务器的各种新奇玩法!

回答

这个原因跟字体类型和大小有关系。雅虎 YUI 的解决方法是把letter-spacing和word-spacing改成某个负值能解决(不同的字体值不同),ytzong 给了个一劳永逸的解决方法,直接写成 -.5em 或者更大 http://www.99css.com/archives/690.span { letter-spacing: -.5em; /* webkit: collapse white-space between units */ *letter-spacing: normal; /* reset IE < 8 */ word-spacing: -.5em; /* IE < 8 && gecko: collapse white-space between units */ } 我个人更喜欢通过修改父元素的字体大小,将大小设置为font-size: 0来解决: p { font-size: 0; }

a123456678 2019-12-02 02:19:40 0 浏览量 回答数 0

回答

这个原因跟字体类型和大小有关系。 雅虎 YUI 的解决方法是把letter-spacing和word-spacing改成某个负值能解决(不同的字体值不同),ytzong 给了个一劳永逸的解决方法,直接写成 -.5em 或者更大 http://www.99css.com/archives/690.span { letter-spacing: -.5em; /* webkit: collapse white-space between units */ *letter-spacing: normal; /* reset IE < 8 */ word-spacing: -.5em; /* IE < 8 && gecko: collapse white-space between units */ }我个人更喜欢通过修改父元素的字体大小,将大小设置为font-size: 0来解决:p { font-size: 0; }

杨冬芳 2019-12-02 02:46:16 0 浏览量 回答数 0

问题

智能语音交互常见问题是什么?

nicenelly 2019-12-01 21:03:54 1205 浏览量 回答数 0

问题

词表管理API是什么?

nicenelly 2019-12-01 21:01:37 1102 浏览量 回答数 0

回答

这种问题一般都是根据经验积累的吧,没看到有官方的文档,倒是从网上搜到一份,供参考。不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。所有元素可继承:visibility和cursor。内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。终端块状元素可继承:text-indent和text-align。列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。表格元素可继承:border-collapse。

a123456678 2019-12-02 02:20:43 0 浏览量 回答数 0

问题

统计分析(1)

nicenelly 2019-12-01 20:56:27 929 浏览量 回答数 0

问题

智能对话平台API如何使用?(1)

nicenelly 2019-12-01 21:03:32 1994 浏览量 回答数 1

问题

什么是特征工程?(1)

nicenelly 2019-12-01 22:09:08 1465 浏览量 回答数 0

问题

特征工程是什么?(2)

nicenelly 2019-12-01 20:56:25 992 浏览量 回答数 0

问题

网络分析

nicenelly 2019-12-01 20:56:33 1207 浏览量 回答数 0

问题

短信上行

nicenelly 2019-12-01 20:57:52 1105 浏览量 回答数 0

问题

短信下行状态报告

nicenelly 2019-12-01 20:57:54 1077 浏览量 回答数 0

问题

语音合成iOS SDK

nicenelly 2019-12-01 21:02:20 1268 浏览量 回答数 0

问题

特征工程是什么?(1)

nicenelly 2019-12-01 20:56:24 1025 浏览量 回答数 0

问题

iOS SDK是什么?

nicenelly 2019-12-01 21:01:26 1234 浏览量 回答数 0

问题

短信查询API(QuerySendDetails)---Node.js

nicenelly 2019-12-01 20:57:48 1360 浏览量 回答数 0

回答

移除空格 使用 margin 负值 使用 font-size:0 letter-spacing word-spacing

茶什i 2019-12-02 03:17:18 0 浏览量 回答数 0

回答

解决方法有很多,上述博文中提到的有:移除空格使用 margin 负值取消闭合标签使用 font-size: 0使用 letter-spacing使用 word-spacing其他我觉得使用 font-size: 0 比较好,对别的元素影响最小 在 a 的外层将字体尺寸设为 0,载对内层的 a 重新设置字体大小,即可。

杨冬芳 2019-12-02 02:55:43 0 浏览量 回答数 0

问题

短信消息API---Node.js

nicenelly 2019-12-01 20:57:49 1139 浏览量 回答数 0

问题

专业技术认证是什么?

nicenelly 2019-12-01 21:05:37 1171 浏览量 回答数 0

问题

SDK及DEMO下载

nicenelly 2019-12-01 20:57:56 1162 浏览量 回答数 0

问题

关键词检测(KWS)是什么?

nicenelly 2019-12-01 21:01:35 1319 浏览量 回答数 0

问题

人脸识别是什么?

nicenelly 2019-12-01 20:59:58 1227 浏览量 回答数 0

问题

图像识别是什么?

nicenelly 2019-12-01 21:00:30 1092 浏览量 回答数 0

问题

短信查询API(QuerySendDetails)---Python

nicenelly 2019-12-01 20:57:30 1058 浏览量 回答数 0

问题

短信查询API(QuerySendDetails)---Python

nicenelly 2019-12-01 20:57:41 1203 浏览量 回答数 0

问题

周期性调度是什么?

nicenelly 2019-12-01 22:10:19 991 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 阿里云双十一主会场 阿里云双十一新人会场 1024程序员加油包 阿里云双十一拼团会场 场景化解决方案 阿里云双十一直播大厅