Question

我已经在上面制作了这个小小的演示文章，容器中的项目的右边距似乎不起作用。顶部，底部和左侧边距正在工作。我想知道我是否完全理解了一些概念。

我的html和css代码在这里：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="col-lg-6">
        <div class="ibox float-e-margins">
          <div class="ibox-title">
            <h5>Activity Codes</h5>
            <div class="ibox-tools">
              <a class="collapse-link">
                <i class="fa fa-chevron-up"></i>
              </a>
              <a class="close-link">
                <i class="fa fa-times"></i>
              </a>
            </div>
          </div>
          <div class="ibox-content">

            <div id="activity_codes_div" class="activity_div"></div>

          </div>
        </div>
      </div>
      <!--- /////////////////////////////// EDIT MODAL ///////////////////////////////////// --->
      <div class="modal inmodal" id="edit_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content animated fadeIn">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <div id="approve_image"><i class="fa fa-sitemap modal-icon"></i></div>
              <h4 class="modal-title" id="requisition_description">Edit Activity Code</h4>
              <small>Edit </small>
              <h6 class="modal-title" id=""></h6>
            </div>
            <form id="form_activity_code">
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="form-group">
                      <label>Node Desciption</label>
                      <input name="text" type="text" placeholder="Enter node description" class="form-control required" id="node_text">
                    </div>
                  </div>
                </div>
                <input type="hidden" name="node_id" id="node_id" value="0">
                <input type="hidden" name="node" id="node" value="0">
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-white approve_close_modal" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary btn-node-submit">Edit</button>
                <button type="button" class="btn btn-danger delete">Delete</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>


  </div>

</body>

</html>

Answer 1

div.item {
  height: 40px;
  width: 90px;
  border: 1px solid gray;
  box-sizing: border-box;
  margin: 5px 100px 5px 5px; 
  display: grid;
  align-content: center;
  justify-content: center;
  background-color: white;
}

试试;）问题是宽度

css保证金权利似乎不起作用

1 个答案: