1

当我使用语义 ui 按钮时，按钮之间有边距。但是当我复制到我的网站时，保证金丢失了。

在此处输入图像描述

我添加了这个jsfiddle

CSS在下面.ui.button给出..在里面margin: 0em;

.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  min-height: 1em;
  outline: none;
  border: none;
  background-color: #EBEBEB;
  color: #808080;
  margin: 0em;
  padding: 0.8em 1.5em;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  -webkit-box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  -moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  -o-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  -ms-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

但在我的网站上没有边距。我想semantic-ui 创造利润？

4

5 回答 5

3

这是如何 display: inline-block;工作的。您可以找到一些解决方法：

于 2013-10-25T09:15:12.267 回答
1

默认情况下display: inline-block;会显示边距 4 像素，因此您可以使用float: left或margin-right: -4px;使用 inline-block。

或使用font-size: 0;@Mr.Alien 评论.....

于 2013-10-25T09:14:06.523 回答
1

只是因为你写了

<div class="positive ui button">Positive Button</div>

和

<div class="negative ui button">Negative Button</div>

在不同的线路上。

如果你把这些写在同一行，就不会出现多余的空格。IE

<div class="positive ui button">Positive Button</div><div class="negative ui button">Negative Button</div>

这是小提琴。

于 2013-10-25T09:17:17.373 回答
1

这不是边际。这是一个空间。这与使本文中的每个字母分开的原因完全相同。

要修复，只需删除两个元素之间的空格，如下所示：

<div class="positive ui button">Positive Button</div><div class="negative ui button">Negative Button</div>

魔法！

于 2013-10-25T09:17:35.567 回答
1

丢失该空白空间的另一种方法是添加：

.example {
    font-size: 0;
}

但要小心，如果你有一些文字里面。

于 2013-10-25T09:38:14.977 回答