究竟是什么标识了网站访问者？

Question

Philin

Asked:2020-01-02 04:36:06 +0000 UTC2020-01-02 04:36:06 +0000 UTC 2020-01-02 04:36:06 +0000 UTC

内联元素之间的填充[重复]

772

元素之间的填充在哪里display: inline-block;以及如何删除它们？缩进在任何地方都不固定：

4 个回答

Voted

MobiDevices · Answer 1 · 2020-01-02T17:22:10Z

inline您在or和相邻单词之间看到的距离inline-block是正常空间。

空格不是固定值，在不同的字体系列中会有所不同，还取决于字体大小。正因为如此，我们无法在properties等中使用固定值word-spacing来解决这个问题margin。

有几种方法可以有效地从 y 中删除缩进inline-block（从当前到过时）：

选项1

使用white-space: nowrap：

main {
    white-space: nowrap;
}

<main>
    <button>Кнопка</button>
    <button>Кнопка</button>
    <button>Кнопка</button>
</main>

选项 2

使用display: flex：

main {
    display: flex;
}

<main>
    <button>Кнопка</button>
    <button>Кнопка</button>
    <button>Кнопка</button>
</main>

选项 3

我们放在 parent 上font-size: 0，并且已经button设置了所需的字体大小。

main {
  font-size: 0;
}

button {
  font-size: 14px;
}

选项 4

删除标记中按钮的连字符。

<main>
  <button>Кнопка</button><button>Кнопка</button><button>Кнопка</button>
</main>

选项 5

您可以注释掉一行的结尾和开头：

<main><!--
  --><button>Кнопка</button><!--
  --><button>Кнопка</button><!--
  --><button>Кнопка</button><!--
--></main>

Yuri · Answer 2 · 2020-07-04T02:00:19Z

选项1：

margin-left (negative) - 一个属性，你可以将项目向左移动，就像在彼此之上一样，可以这么说，“摆脱”它们之间讨厌的空间。

ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
  margin-left: 0;
}

ul li + li {
  margin-left: -.36em;
}

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
</ul>

选项 2：

font-size - 一个设置字体大小的属性，通过它我们的空间（字符）可以设置为零的字体大小，从而使其非常小以至于不会被白白看到。

ul {
  font: 14px Verdana, Geneva, sans-serif;
  /* Выставляем родителю значение в ноль */
  font-size: 0;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
  /* Возвращаем в нормальное состояние у потомков */
  font-size: 14px;
}

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
</ul>

选项 3：

letter-spacing是定义字符间距的属性。默认值（正常）根据字体大小和类型设置正常间距。

ul {
  font: 14px Verdana, Geneva, sans-serif;
  /* Выставляем родителю значение -.36em */
  letter-spacing: -.36em;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
  /* Возвращаем в нормальное состояние у потомков */
  letter-spacing: normal;
}

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
</ul>

选项 4：

word-spacing是定义单词之间间距的属性。默认情况下，像 letter-spacing 一样，它根据字体的大小和类型进行设置。

ul {
  font: 14px Verdana, Geneva, sans-serif;
  /* Выставляем родителю значение -.36em */
  word-spacing: -.36em;
  /* Лекарство для webkit */
  display: table;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
  /* Возвращаем в нормальное состояние у потомков */
  word-spacing: normal;
}

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
</ul>

选项 5：

将元素相互按压，即关闭，标记到标记，从而删除单词间距。

ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

<ul>
  <li>Пункт 1</li><li>Пункт 2</li><li>Пункт 3</li><li>Пункт 4</li><li>Пункт 5</li>
</ul>

选项 6：

在元素之间放置注释，从而消除它们之间的缩进。

ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

<ul>
  <li>Пункт 1</li><!--
  --><li>Пункт 2</li><!--
  --><li>Пункт 3</li><!--
  --><li>Пункт 4</li><!--
  --><li>Пункт 5</li>
</ul>

选项 7：

不要为 li 指定结束标签

ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

<ul>
  <li>Пункт 1
  <li>Пункт 2
  <li>Пункт 3
  <li>Пункт 4
  <li>Пункт 5
</ul>

选项 8：

将右大括号移动到下一行

ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

<ul>
  <li>Пункт 1</li
  ><li>Пункт 2</li
  ><li>Пункт 3</li
  ><li>Пункт 4</li
  ><li>Пункт 5</li>
</ul>

选项 9：

脚本：

document.сlearSpaces = function(node) {
  var childLength = node.childNodes.length;

  if( childLength === 0 ) {
    return;
  };
  
  for(var i = childLength; i > 0; i -= 1) {
    var children = node.childNodes[i - 1];
  
    var nodeType = children.nodeType,
        nodeValue = children.nodeValue;
    
    if( nodeType === 8 || ( nodeType === 3 && !/\S/.test( nodeValue ) ) ) {
      node.removeChild( children );
    }
  }
};

document.сlearSpaces(document.querySelector('ul'));

ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
</ul>

jQuery 脚本：

$(function() {
  $.сlearSpaces = function($elements) {
    $elements.contents().each(function() {
      var nodeType = this.nodeType,
          nodeValue = this.nodeValue;

      if (nodeType === 8 || (nodeType === 3 && !/\S/.test(nodeValue))) {
        $(this).remove();
      };
    });
  };

  $.сlearSpaces($('ul'));
});

ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
</ul>

_{来源：http ://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inline-blokami.html}

Philin · Answer 3 · 2020-01-02T04:42:30Z

Philin

2020-01-02T04:42:30Z2020-01-02T04:42:30Z

帮助：

尝试将所有按钮的代码放在一行中

4

Vadim Ovchinnikov · Answer 4 · 2020-06-23T05:28:35Z

更正确的答案是不使用 c 元素display: inline-block来创建标记。

是时候使用更现代的 CSS 模块了：用于 1D 布局的 Flexbox 和用于 2D 的 CSS Grid。

通过Flexbox解决这个问题：

.number-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 330px;
  margin: 0 auto;
}

button {
  border: none;
  width: 100px;
  margin: 5px;
  height: 100px;
  background-color: green;
  color: white;
  font-size: 16px;
}

<div class="number-buttons">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>0</button>
</div>

通过 CSS 网格（在这种情况下最好）：

.number-buttons {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
  justify-content: center;
  margin: 0 auto;
}

button {
  border: none;
  background-color: green;
  color: white;
  font-size: 16px;
}

button:last-child {
  grid-column: 2;
}

<div class="number-buttons">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>0</button>
</div>

内联元素之间的填充[重复]

选项1

选项 2

选项 3

选项 4

选项 5

Python 3.6 - 安装 MySQL (Windows)

C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

返回指针的函数

我使用 django 管理面板添加图像，但它没有显示

这些条目是什么意思，它们的完整等效项是什么样的

浏览器仍然缓存文件数据

在 Excel VBA 中激活工作表的问题

为什么内置类型中包含复数而小数不包含？

获得唯一途径

告诉我一个像幻灯片一样创建滚动的库

内联元素之间的填充[重复]

4 个回答

选项1

选项 2

选项 3

选项 4

选项 5

相关问题