Question

我目前正在使用CSS网格布局处理页面，但是我遇到了div元素的问题，在这些元素中，它们会自动在文本上方和下方的输出中插入换行符。

有没有办法用CSS轻松删除它们？

我尝试将div元素更改为span，但没有任何改变。我还将div元素设置为display: inline;，但这也不起作用。

＆＃13;

html {
  background-color: black;
}

.grid-container {
  display: grid;
  width: 1200px;
  height: 600px;
  grid-template-columns: 300px 1fr 1fr;
  grid-template-rows: 110px 200fr 200fr 80px;
  grid-gap: 1rem;
  background-color: #2196F3;
  padding: 10px;
  margin: auto;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  display: inline-block;
}

.grid-heading {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  font-size: 40px;
  padding: 5px;
}

.grid-sidebar {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

.grid-content1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.grid-content2 {
  grid-row: 3 / 4;
  grid-column: 2 / 4;
}

.grid-footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

＆＃13;

<!DOCTYPE html>
<title>
  Home
</title>
<head>

</head>
<html>
<br>
<br>
<br>
<div class="grid-container">
  <div class="grid-item grid-heading">
    <h1>Heading</h1>
  </div>
  <div class="grid-item grid-sidebar">
    <p>2</p>
  </div>
  <div class="grid-item grid-content1">3</div>
  <div class="grid-item grid-content2">4</div>
  <div class="grid-item grid-footer">5</div>
</div>
</html>

＆＃13;

Answer 1

尝试

div{ 
display:inline-block;
}

显示：直列;应该有用

Answer 2

您可能需要包含屏幕截图...但请尝试删除网格项类的填充以及调整网格间隙。另请注意，大多数浏览器的默认样式包括大多数项目的边距和填充。

Answer 3

我认为grid-gap删除了这种风格

 .grid-container {
      grid-gap: 0;
    }

    h1, p {
        margin: 0;
    }

比正常工作https://jsfiddle.net/z7y2qaa7/

从div元素中删除换行符

3 个答案: