最近在练习代码的时候,遇到几个问题,但是没找到解决办法.详情如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
a{display: inline-block;
margin: 1px;
border: 1px solid black;
text-decoration: none;
width: 120px;
height: 20px;
background: red;}
#sp{position: float;
float: left;
}
#ki{position: absolute;
top: 70px;
left: 70px;}
</style>
</head>
<body>
<div id="ki">
<div id="sp">
<a href="">第一个行内元素</a><a href="">第二个行内元素</a>
</div>
</div>
</body>
</html>

这个时候父元素和祖父元素一个是浮动定位,一个是绝对定位.结果是inline-block在同一行.

但是当两个都是绝对定位时,inline-block不在同一行.

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><style type="text/css">*{margin: 0;padding: 0;}a{display: inline-block;margin: 1px;border: 1px solid black;text-decoration: none;width: 120px;height: 20px;background: red;} #sp{position: absolute; }#ki{position: absolute;top: 70px;left: 70px;}</style>
</head><body><div id="ki"><div id="sp"><a href="">第一个行内元素</a><a href="">第二个行内元素</a></div></div></body></html>

结果如下

并且inline-block之间有默认的间隙无法消除.我发现的问题是，把元素设置为inline-block元素后，会有默认间隙，这是由于元素换行的空白符导致的。我们有以下办法可以解决。

不过巧妙的利用换行符也有

inline-block的几个问题(还没解决)相关推荐

996.ICU的问题还没解决，浙江拟用征信约束频繁跳槽
996.icu的风波还没有结束,杭州逆行小哥的哭声依旧在耳边回荡,一则"浙江拟用征信约束频繁跳槽"新闻又在网上一石激起千层浪.2019年对程序员来说真的是水逆的一年. 最开始在朋友 ...
java报错：for input string(问题暂时还没解决，有兴趣的可以看一下我这个情况。欢迎点评！)
写在开头的第二次编辑问题虽然不知道怎么回事,但是这个方法还是有着不行.先不说转化成String类型的时间能不能转化成整型,就这个时间格式下的数字就已经超出 Integer或者Int的界限.还是不要 ...
npm install的解决方法试错，还没解决。
首先,我想要从github上面下载一个极简的vue admin管理后台.按照网页上面的提示: 安装时: 在npm install之后,npm run dev出现上面的问题,关于vue-admin-te ...
共享问题还没解决，依然利用下网络～～IRI中的输入己输出对比！
输出参数如下: jmag(=0/1,geog/geom),纬度,经度 1,30,330 年份,mmdd(or -ddd),时间类型(=0/1,LT/UT),时间 1985,115,0,12 高度 ...
python爬虫，请教一下为何我爬取数据有的完整有的不完整爬的百家号登陆这一块还没解决但关注这一块很难解决
下面附上我的代码.求教一下. 我该考虑的东西都考虑是加载的时候认为我是爬虫么? from selenium import webdriver import time from pyquery imp ...
一句话解决两天没解决的网络问题
网络问题已经造成两天不能正常访问博客园,访问时速度很不稳定,经常页面打开一部分,之后的部分很难显示出来. 今天下午,我又打电话询问电信工作人员. "网络问题怎么还没解决? ...
还没使用过Web Worker? 推荐一款开源工具Workerize-Loader，让你在webpack项目中轻松使用Web Worker
还没使用过Web Worker? 推荐一款开源工具Workerize-Loader,让你在webpack项目中轻松使用Web Worker Workerize-Loader 将模块及其依赖项移动到 W ...
HTTP/3 来了！HTTP/2 还没怎么用起来呢，先一起扫个盲吧！
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者 | billpchen 来源 | 公众号「占小狼的博客」 2 ...
还没使用过Web Worker，推荐一款开源工具Workerize，快速上手
还没使用过Web Worker,推荐一款开源工具Workerize,快速上手开源项目:https://github.com/developit/workerize 将模块移动到 Web 辅助角色中, ...
HTTP 2 还没整明白呢，HTTP 3 又来了？
" 阅读本文大概需要 10 分钟. " 作者:billpchen,腾讯看点前端开发工程师 2015 年 HTTP/2 标准发表后,大多数主流浏览器也于当年年底支持该标准.此后,凭借 ...

inline-block的几个问题(还没解决)

最近在练习代码的时候,遇到几个问题,但是没找到解决办法.详情如下

这个时候父元素和祖父元素一个是浮动定位,一个是绝对定位.结果是inline-block在同一行.

但是当两个都是绝对定位时,inline-block不在同一行.

结果如下

并且inline-block之间有默认的间隙无法消除.我发现的问题是，把元素设置为inline-block元素后，会有默认间隙，这是由于元素换行的空白符导致的。我们有以下办法可以解决。

inline-block的几个问题(还没解决)相关推荐

最新文章

热门文章