float 属性忽略边距

Question

我正在学习语义-ui 框架，目前我正在使用段。我的代码如下所示：

<!DOCTYPE html>
<html>
<head>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script
    src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>Assignments</title>
<style>
    .raised.segment{
        margin: 1.5%;
        width: 30%;
        display: inline-block;
        float: left;
    }
    h3 {
        display: inline-block;
        text-align: center;
    }
</style>
</head>
<body>


 <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>
</body>
</html>

除了第一段，一切都很好。 float:left 属性忽略了它的边距，所以第一个片段触及了边界。其他段没问题。有什么建议吗？

Answer 1

Class 和 semantic.min.css

中的 .ui.segment:first-child{margin-top: 0;}

有 margin-top:0;从而使其接触边界，用自定义 css

覆盖它

为此规则添加重要标签

CSS

.raised.segment{
        margin: 1.5% !important;
        width: 30%;
        display: inline-block;
        float: left;
    }

一切正常

Link For reference

希望这对您有所帮助..

float 属性 忽略边距

float property ignores margin

html

css

semantic-ui

float 属性忽略边距