在两个内联块元素之间添加间距

时间：2021-03-12 19:35:28

标签： html css bootstrap-4

我的标题旁边有一个模态按钮，两个元素都有 display: inline-block;。我正在尝试留出间距并使按钮向右移动并保持标题元素居中。

我尝试调整项目容器的内边距，但仍然无效？

.btn.btn-info.btn-md {
    background: #104723;
    border-color: #104723;
    border-radius: 3px;
    float: right;
    display: inline-block;
    position: absolute;
    
}
.btn.btn-info.btn-md:active {
    background: #104723;
    border-color: #104723;
    border-radius: 3px;
    float: right;
    display: inline-block;
    position: absolute;
    margin-right: -40px;
}

  .pageheadh {
      font-size: 30px;
      font-weight: bolder;
      color: black;
      text-align: center;
      display: inline-block;
  }
  .pageheadp {
      text-align: center;
      color: black;
      font-weight: bold;
  }
  .center {
    align-items: baseline;
    justify-content: center;
    text-align: center;
    padding-right: 10px;
  }
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <!-- Datatables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<div class="center">
<h3 class="pageheadh">Fitness Tracker</h3>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

            <p class="pageheadp">Click on any of the tabs to track your progress in that category. </p>
        <!--<input type="text" class="global_filter" id="global_filter">-->
        <div class="clearfix"></div>
        <ul class="nav nav-tabs">
            <li class="active"> <a href="#1" data-toggle="tab">Weekly Weight &Delta;</a>
            </li>
            <li><a href="#2" data-toggle="tab">Total Weight &Delta;</a>
            </li>
            <li><a href="#3" data-toggle="tab">Weekly Steps</a>
            </li>
            <li><a href="#4" data-toggle="tab">Total Steps</a>
            </li>
            <li><a href="#5" data-toggle="tab">Weekly Minutes</a>
            </li>
            <li><a href="#6" data-toggle="tab">Total Minutes</a>
            </li>
            <li><a href="#7" data-toggle="tab">Step Points</a>
            </li>
            <li><a href="#8" data-toggle="tab">Exercise Points</a>
            </li>
            <li><a href="#9" data-toggle="tab">Weekly Winners</a>
            </li>
        </ul>

3 个答案:

答案 0 :(得分：1)

首先将 position: relative 添加到 .center 以使用 绝对 定位正确定位按钮。

并为 .btn.btn-info.btn-md 选择器添加此规则集：

top: 0;
bottom: 0;
height: 40px;
margin: auto auto auto 50px;


.btn.btn-info.btn-md {
    background: #104723;
    border-color: #104723;
    border-radius: 3px;
    float: right;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 40px;
    margin: auto auto auto 50px;
}

.btn.btn-info.btn-md:active {
    background: #104723;
    border-color: #104723;
    border-radius: 3px;
    float: right;
    display: inline-block;
    position: absolute;
    margin-right: -40px;
}

.pageheadh {
    font-size: 30px;
    font-weight: bolder;
    color: black;
    text-align: center;
    display: inline-block;
}

.pageheadp {
    text-align: center;
    color: black;
    font-weight: bold;
}

.center {
    align-items: baseline;
    justify-content: center;
    text-align: center;
    padding-right: 10px;
    position: relative;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<div class="center">
    <h3 class="pageheadh">Fitness Tracker</h3>
    <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Prize Plaza</button>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<p class="pageheadp">Click on any of the tabs to track your progress in that category.</p>
<!--<input type="text" class="global_filter" id="global_filter">-->
<div class="clearfix"></div>
<ul class="nav nav-tabs">
    <li class="active"><a href="#1" data-toggle="tab">Weekly Weight &Delta;</a></li>
    <li><a href="#2" data-toggle="tab">Total Weight &Delta;</a></li>
    <li><a href="#3" data-toggle="tab">Weekly Steps</a></li>
    <li><a href="#4" data-toggle="tab">Total Steps</a></li>
    <li><a href="#5" data-toggle="tab">Weekly Minutes</a></li>
    <li><a href="#6" data-toggle="tab">Total Minutes</a></li>
    <li><a href="#7" data-toggle="tab">Step Points</a></li>
    <li><a href="#8" data-toggle="tab">Exercise Points</a></li>
    <li><a href="#9" data-toggle="tab">Weekly Winners</a></li>
</ul>

答案 1 :(得分：0)

您可以为按钮添加绝对位置：

.btn.btn-info.btn-lg {
            background: #104723;
            border-color: #104723;
            border-radius: 3px;
            float: right;
            display: inline-block;
            position: absolute;
            right:15px;
            top: 10px;
        }

答案 2 :(得分：0)

也许添加一个

<br>

在两个div之间。如果没有，那么也许可以改变这一点。

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>

到

<button type="button" class="btn btn-info btn-lg ml-5" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>

如果没有，则将您的 css 更改为

.btn.btn-info.btn-lg {
            background: #104723;
            border-color: #104723;
            border-radius: 3px;
            float: right;
            display: inline-block;
            position: absolute;
            right:15px;
            top: 10px;
            margin-right: 50px;
        }
相关问题
最新问题