解决标签回车后产生的空格2

---恢复内容开始---

事例分析：

nav中有5个a标签，在不给a标签设置固定宽度时，如何平均分布在nav中。

nav宽度auto，或固定。为了方便查看，这里给一个固定值 500px;
给a设置百分比宽度，5个a则为20%。这里设置一个边框方便查看。

<nav><a href="">1组</a><a href="">2组</a><a href="">3组</a><a href="">4组</a><a href="">5组</a></nav>

nav{width: 500px;border: 1px solid black;box-sizing: border-box;
}
a{border: 1px solid red;box-sizing: border-box;display: inline-block;width: 20%;
}

浏览器显示：

解决方法：由于a标签之间空格产生的间隙，设置nav：font-size:0;

浏览器显示：

a标签继承nav：font-size:0；

重新设置a标签字体大小。

最终代码：

nav{width: 500px;border: 1px solid black;box-sizing: border-box;font-size: 0;
}
a{border: 1px solid red;box-sizing: border-box;display: inline-block;width: 20%;font-size: 14px;;
}

浏览器显示：

---恢复内容结束---

转载于:https://www.cnblogs.com/chen-haobox/p/9503077.html

解决标签回车后产生的空格2相关推荐

解决标签回车后产生的空格
因为代码之间有规范性; 代码之间打回车会进行换行; 就会产生空白折叠; 那在页面当中两个标签之间就会产生空格一个空格会占有一个字体的大小(由font-size影响) 例: <articl ...
Word2019中Visio对象图片插入题注时自动删除标签与编号前的空格，编号后添加空格
问题引入撰写论文时为了修改方便,通常以插入题注和交叉引用的方式来给图片标号,这样修改图片和图号后可以方便.自动地更新. 然而,Word在插入题注上从03到13一直没有针对中国用户优化. 插入题注的标 ...
解决SublimeREPL安装后输入字符且回车后没有输出的问题
解决SublimeREPL安装后输入字符且回车后没有输出的问题提供一个可能的思路:有可能需要使用多个空格或者空格+;分号作为输入结束符号. 我的SublimeREPL确实有时候会遇到回车输入 ...
Word插入题注优化（自动删除标签与编号前的空格，编号后添加空格）
简介最近在论文写作时发现,对图或者表右击进行插入题注时格式有点不正确,会在标签和编号之间多一个半角空格,而编号和题注内容之间又缺少一个空格,这也是Word目前对中文支持不太好的地方.我们常规的格式应 ...
Keil MDK5中（1）汉字注释显示转向，字体显示朝左旋转90°（2）汉字注释显示为问号（3）按回车后光标缩进距离太大的解决办法
这是目录0.0 前言第一个问题:汉字注释显示转向,字体显示朝左旋转90°解决办法: 第二个问题:注释中的汉字变成了问号,显示不出来,如下图所示: 第三个问题:按回车后光标缩进距离太大,如下图所示: ...
去掉图题注空格_【转载】论文排版-Word插入题注时自动删除标签与编号前的空格，编号后添加空格...
Sub InsertCaption()'修改系统插入"题注"命令 '功能:自动删除标签与编号间的空格(英文除外),并在题注数字后添加一个空格:适用于:Word 2003 - 201 ...
IDEA中输入sout回车后得到的是println如何解决
新手用IDEA写代码,输入sout并回车后得到的是println或者其他该如何解决,手把手教你如何设置一.点击左上角 File,再点击Settings... 二.在搜索栏输入sout则会得到下图,要 ...
python回车换行怎么不行_解决pycharm回车之后不能换行或不能缩进的问题
解决pycharm回车之后不能换行或不能缩进的问题如果不小心按到键盘上的Insert键的话,光标显示的就不是一条竖线,而是一个类似方块的阴影区域,比如插入一下insert键的介绍:它叫插入键,缩写 ...
20100705 学习记录：textarea内容的格式控制（回车、换行、空格）
表单对象textarea内容的格式控制(回车.换行.空格) 1. 代码  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT ...
word回车后间距太大_Word这些神奇的功能，你知道多少？学会这4招，工作不再发愁...
工作中,常常有朋友花费大量时间去学习excel和PPT,很少钻研word,仅仅认为word就是一文字编辑软件,会录入文字就可以了.其实不然,经常使用word的朋友肯定会感慨,它给了我们很多的惨痛教训, ...

解决标签回车后产生的空格2

事例分析：

解决标签回车后产生的空格2相关推荐

最新文章

热门文章