css - 如何在 inline-block 之后删除这个空间?
问题描述
我不知道这个空间是从哪里来的(在附图中用红色标记)?任何指针?
这是一个“即将推出”页面,主要包含标头和标尺,如果在移动设备或桌面设备上,一些社交链接的位置会有所不同。我在使用移动视图时遇到问题。
这是相关的 HTML:
<div class="masthead">
<div class="masthead-bg"></div>
<div class="container h-100">
<div class="row h-100">
<div class="col-12 my-auto">
<div class="masthead-content text-white py-5 py-md-0">
<h1 class="mb-3">Register</h1>
<p class="mb-5">Building a X.
We're building X for you. <strong>Request an invitation for early access using the form below!</strong></p>
<form action="https://hen.us18.list-manage.com/subscribe/post" method="POST" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<input type="hidden" name="u" value="377b993ba697354f6584371c9">
<input type="hidden" name="id" value="e1c7ba1f4b">
<div class="input-group input-group-newsletter">
<input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" class="form-control" placeholder="Enter your email..." aria-label="Enter email..." aria-describedby="basic-addon">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">Notify Me!</button>
</div>
<input type="hidden" name="ht" value="f5b0455009025ab4743b2ecc932316028905c673:MTUzMTgyNjMzMC43NDM3">
<input type="hidden" name="mc_signupsource" value="hosted">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="mastfoot">
<div class="inner-mastfoot">
© 2018 X Ltd. All Rights Reserved. •
<a href="/legal">Legal</a>
• <a href="/contact">Contact</a>
</div>
</div>
<div class="social-icons">
<ul class="list-unstyled text-center mb-0">
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-medium"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
</ul>
</div>
和相关的CSS:
.masthead .masthead-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
min-height: 35rem;
height: 100%;
background-color: rgba(0, 46, 102, .8);
transform: skewY(4deg);
transform-origin: bottom right
}
.social-icons {
position: absolute;
margin-bottom: 2rem;
width: 100%;
z-index: 2
}
.social-icons ul {
margin-top: 2rem;
width: 100%;
text-align: center
}
.social-icons ul>li {
margin-left: .75rem;
margin-right: .75rem;
display: inline-block
}
.social-icons ul>li>a {
display: block;
color: #fff;
background-color: rgba(0, 46, 102, .8);
border-radius: 100%;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
}
.mastfoot {
color: #262626;
color: rgba(26, 26, 26, .5);
position: absolute;
bottom: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
z-index: 2
}
.inner-mastfoot {
font-size: 0.8rem;
text-align: center
}
解决方案
据我所知——在这种情况下,在桌面上通过将窗口大小调整为与移动屏幕一样薄——这是因为您的内容不够高而无法填满屏幕。
图片:https ://i.stack.imgur.com/9Cmyr.png
你的神秘空间只是内容的高度<body>
,没有内容。
推荐阅读
- javascript - Webpack:包含 html 文件及其 js 脚本以及独立的 js 脚本
- python - 在 Pandas DataFrame 上对迭代函数进行矢量化
- android - android AR核心抛出模拟器不支持的设备
- http - MIT APP INVENTOR 中的 CURL 请求执行
- command-line - gnuplot 命令行选项
- python-sphinx - 在 toctree 中包含标准的 reST 标签引用
- ios - TestFlight 配置文件无效
- rust - 如何将传入流写入warp中的文件?
- java - Cordova run android不断失败
- java - 模拟豆问题