文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Flexbox -“间隔”-零宽度元素导致不必要的空间

问Flexbox -“间隔”-零宽度元素导致不必要的空间
EN

Stack Overflow用户
提问于 2017-10-24 10:42:31
回答 5查看 85关注 0票数 1

我正在尝试用柔性盒元素创建一种“术语表”。我有一个导航可以滚动到正确的字母。

这就是我的问题:我把锚链接放在每个字母的第一个元素之前。这会导致不必要的空间，即使元素有宽度:0px；可见性:隐藏；等等。我想我已经尝试了几乎所有的东西。希望你有解决办法。

注意:在这种情况下，它不是一个选项设置锚链接为位置:绝对！

​

代码语言：javascript
复制
*, *:before, *:after {
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

.letters {
	background: #fff;
	border-bottom: 1px solid #ccc;
	text-align: center;
	padding: 10px;
	margin-bottom: 20px
}

.letters ul li {
	display: inline-block;
	height: 34px;
	line-height: 34px;
	list-style: outside none none;
	text-align: center;
	width: 34px;
	margin: 0 .27em;
}

.letters ul li a {
	background: #ad1800 none repeat scroll 0 0;
	border: 1px solid #ad1800;
	color: #fff;
	display: block;
	line-height: 32px;
	text-decoration: none;
}

.letter_around {
	list-style: none;
	padding: 20px 50px;
	position: relative;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.glossary_item {
	padding: 15px 20px 20px;
	width: 22%;
	background: #fff;
	border: 1px solid #ccc;
	transition: 0.4s all;
	overflow: hidden;
	margin-bottom: 20px;
}

.glossary_letter {
	width: 0px;
	height: 0px;
	overflow: hidden;
	position: relative;
	visibility: hidden;
}
代码语言：javascript
复制
<div class="wrapper glossary_wrapper">
  <div class="content clearfix">
    <div class="letters clearfix">
      <ul class="letters_ul">
        <li class="glossarylink">
          <a href="#A">A</a>
        </li>
        <li class="glossarylink">
          <a href="#B">B</a>
        </li>
        <li class="glossarylink">
          <a href="#C">C</a>
        </li>
        <li class="glossarylink">
          <a href="#D">D</a>
        </li>
        <li class="glossarylink">
          <a href="#E">E</a>
        </li>
      </ul>
    </div>
    <div class="letter_around">
      <a class="glossary_letter" id="A" name="A"></a>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="B" name="B"></a>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="C" name="C"></a>
      <div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="D" name="D"></a>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="E" name="E"></a>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
    </div>
  </div>
</div>

​

html
css
flexbox
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-10-24 13:16:14

为我自己找到了解决办法。我想这不是最好的解决办法，但效果很好。

我用左边的百分比的边距-左减值填充了由柔性箱本身计算的空格。在我的例子中，元素的宽度是22%。这4x是整个容器宽度的88%。这意味着元素的计算裕度约为容器宽度的4%。所以，如果你把锚元素的边距减少4%，你就能得到正确的位置。

我知道这不是最好的解决办法，但有效。如果你有更好的，请给我看看。:)

​

代码语言：javascript
复制
*, *:before, *:after {
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

.letters {
	background: #fff;
	border-bottom: 1px solid #ccc;
	text-align: center;
	padding: 10px;
	margin-bottom: 20px
}

.letters ul li {
	display: inline-block;
	height: 34px;
	line-height: 34px;
	list-style: outside none none;
	text-align: center;
	width: 34px;
	margin: 0 .27em;
}

.letters ul li a {
	background: #ad1800 none repeat scroll 0 0;
	border: 1px solid #ad1800;
	color: #fff;
	display: block;
	line-height: 32px;
	text-decoration: none;
}

.letter_around {
	list-style: none;
	padding: 20px 10px;
	position: relative;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.glossary_item {
	padding: 15px 20px 20px;
	width: 22%;
	background: #fff;
	border: 1px solid #ccc;
	transition: 0.4s all;
	overflow: hidden;
	margin-bottom: 20px;
}

.glossary_letter {
	width: 0px;
	height: 0px;
	overflow: hidden;
	position: relative;
	visibility: hidden;
  margin-left: -4%;
}
代码语言：javascript
复制
<div class="wrapper glossary_wrapper">
  <div class="content clearfix">
    <div class="letters clearfix">
      <ul class="letters_ul">
        <li class="glossarylink">
          <a href="#A">A</a>
        </li>
        <li class="glossarylink">
          <a href="#B">B</a>
        </li>
        <li class="glossarylink">
          <a href="#C">C</a>
        </li>
        <li class="glossarylink">
          <a href="#D">D</a>
        </li>
        <li class="glossarylink">
          <a href="#E">E</a>
        </li>
      </ul>
    </div>
    <div class="letter_around">
      <a class="glossary_letter" id="A" name="A"></a>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="B" name="B"></a>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="C" name="C"></a>
      <div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="D" name="D"></a>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="E" name="E"></a>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
    </div>
  </div>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2017-10-24 11:52:05

这个解决方案并不是特别干净。理想情况下，拥有更多知识的人会提供更好的解决方案。

  1. 从justify-content中删除.letter-around属性
  2. 将margin-right: auto添加到glossary-item以在项之间创建空间。
  3. 使用nth-of-type选择器针对每个网格中的最后一个项，并删除页边距。

我已经将glossary-letter从a改为span，我认为它在语义上更有意义。我还将一些css规则从.glossary-item移到了span。

​

代码语言：javascript
复制
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.letters {
  background: #fff;
  border-bottom: 1px solid #ccc;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px
}

.letters ul li {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  list-style: outside none none;
  text-align: center;
  width: 34px;
  margin: 0 .27em;
}

.letters ul li a {
  background: #ad1800 none repeat scroll 0 0;
  border: 1px solid #ad1800;
  color: #fff;
  display: block;
  line-height: 32px;
  text-decoration: none;
}

.letter_around {
  list-style: none;
  padding: 20px 50px;
  position: relative;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.glossary_item {
  transition: 0.4s all;
  overflow: hidden;
  margin-bottom: 20px;
  width: 22%;
  margin-right: auto;
}

.glossary_item span {
  padding: 15px 20px 20px;
  background: #fff;
  border: 1px solid #ccc;
  display: block;
}

.glossary_item:nth-of-type(4n) {
  margin-right: 0;
}
代码语言：javascript
复制
<div class="wrapper glossary_wrapper">
  <div class="content clearfix">
    <div class="letters clearfix">
      <ul class="letters_ul">
        <li class="glossarylink">
          <a href="#A">A</a>
        </li>
        <li class="glossarylink">
          <a href="#B">B</a>
        </li>
        <li class="glossarylink">
          <a href="#C">C</a>
        </li>
        <li class="glossarylink">
          <a href="#D">D</a>
        </li>
        <li class="glossarylink">
          <a href="#E">E</a>
        </li>
      </ul>
    </div>
    <div class="letter_around">
      <span class="glossary_letter" id="A" name="A"></span>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <span class="glossary_letter" id="B" name="B"></span>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <span class="glossary_letter" id="C" name="C"></span>
      <div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
      <span class="glossary_letter" id="D" name="D"></span>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <span class="glossary_letter" id="E" name="E"></span>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
    </div>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2017-10-24 10:57:29

最简单的解决方案是添加

代码语言：javascript
复制
.glossary_letter {
  display: none;
}

因此，它将是裂变，但你的额外空间将消失。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/46908406

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档