1

セマンティック ui ボタンを使用すると、ボタンの間に余白ができます。しかし、自分のサイトにコピーすると、そのマージンが失われました。

ここに画像の説明を入力

このjsfiddleを追加しました

.ui.buttonCSSは以下に与えられています..その中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

空きスペースをなくすもう 1 つの方法は、以下を追加することです。

.example {
    font-size: 0;
}

ただし、中にテキストがある場合は注意してください。

于 2013-10-25T09:38:14.977 に答える
1

display: inline-block;デフォルトでマージン4ピクセルが表示されるため、代わりfloat: leftに使用するmargin-right: -4px;か、インラインブロックを使用する場合に使用できます。

またはfont-size: 0;@Mr.Alienがコメントしたように使用.....

于 2013-10-25T09:14:06.523 に答える
1

マージンではありません。スペースです。これは、このテキストの各文字が分離されている理由とまったく同じです。

修正するには、次のように 2 つの要素の間のスペースを削除するだけです。

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

マジック！

于 2013-10-25T09:17:35.567 に答える
1

それはあなたが書いたからです

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

と

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

別の行で。

これらを同じ行に記述すれば、余分なスペースは表示されません。すなわち

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

これがフィドルです。

于 2013-10-25T09:17:17.373 に答える