主页 / 问题 / 1125399
Accepted
Dmitrii
Asked:2020-05-14 17:53:16 +0000 UTC2020-05-14 17:53:16 +0000 UTC

css display: inline 或 display: inline-inline-block 不带空格

  • 772

有一个 display: inline 样式，允许将 div 放置在一行中。它可以工作，但会在元素之间插入空格。如何删除它？ 

.conteiner div {
  display: inline;
}

.conteiner div button {
  width: 100px;
  height: 20px;
}
<html>
<head></head>
<body>
  <div class=conteiner>
    <div><button></button></div>
    <div><button></button></div>
  </div>
</body>
</html>

css

2 个回答

  1. 或者，只需将 div 写在一行上：

      
.conteiner div{
  display: inline;
}

.conteiner div button{
  width: 100px;
  height: 20px;
}
    <html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class=conteiner>
    <div><button></button></div><div><button></button></div>
  </div>
</body>
</html>

    • 1
  2. Best Answer

    当标记中的块之间有空格时，浏览器中就会出现间隙，其宽度取决于字体大小。例如，对于 14px 的字体，这个间距总是 4px。

    解决方案：

    .conteiner div {
  display: inline;
}

.conteiner div button {
  width: 100px;
  height: 20px;
}

.conteiner div .margin--4 {
  margin-right: -4px;
}

.font-size-0 {
  font-size: 0;
}

.font-size-0 .button {
  font-size: 14px;
}
    <!-- Заполнение пустого пространства комментарием -->
<div class="conteiner">
  <div><button></button></div><!--
  --><div><button></button></div><!--
  --><div><button></button></div>
</div>

<!-- Отрицательный отступ справа -->
<div class="conteiner">
  <div><button class="margin--4"></button></div>
  <div><button class="margin--4"></button></div>
  <div><button class="margin--4"></button></div>
</div>

<!-- Растягивание закрывающего тега -->
<div class="conteiner">
  <div><button></button></div
  ><div><button></button></div
  ><div><button></button></div>
</div>

<!-- Установка нулевого размера шрифта для блоков -->
<div class="conteiner font-size-0">
  <div><button></button></div>
  <div><button></button></div>
  <div><button></button></div>
</div>

    • 1

相关问题