如何在按钮之间留出一定的余量？ （数据库内容）

时间：2019-06-05 21:44:27

标签： html css

我的网站上有此按钮，但顶部和底部的页边距不起作用，我认为这是因为内容来自我的数据库。.我也遇到同样的问题，但是对于我的画廊，有人知道如何修复它？ 基本上我想在按钮之间留一些空间。 调整窗口大小以移动查看

enter image description here 

.divtitleCategoria{
  text-align: center;
}

.btn-category {
  color: var(--mainBlack) !important;
  border:1px #000 solid;
  margin:10px 8px;
  font-family:"Calibri";
  font-weight: bold;
  font-size:16px;
}
.btn-category:hover {
  color: var(--mainTinto) !important;
  background-color:#fff;
}
.inline{
  display: inline;
}
<div class="col-md-12 col-xs-12">
  <div id="get_category">
      <div class='divtitleCategoria'>
            <li  class='inline' > 
			<a href='#'  class=' inline btn btn-category text-uppercase'>herehereherehere</a>
			</li>
          <li  class='inline' > 
			 <a href='#' class=' inline btn btn-category text-uppercase'>hereherehereherehere</a>
           </li>
           <li  class='inline' > 
			<a href='#'  class=' inline btn btn-category text-uppercase'>hereherehereherehere</a>
		   </li>       
          <li  class='inline' > 
			<a href='#'  class=' inline btn btn-category text-uppercase'>hereherehereherehere</a>
		  </li>       
                    
					
       </div>
	</div>
</div>

3 个答案:

答案 0 :(得分：0)

很难使用给定​​的代码进行100％复制，但是我相信您只需要在display: inline-block;类中添加.btn-category。

此外，您还应该在列表项周围使用<ul>标签。

.divtitleCategoria {
  text-align: center;
}

.btn-category {
  color: var(--mainBlack) !important;
  border: 1px #000 solid;
  margin: 10px 8px;
  font-family: "Calibri";
  font-weight: bold;
  font-size: 16px;
}

.btn-category:hover {
  color: var(--mainTinto) !important;
  background-color: #fff;
}

.inline {
  display: inline-block;
}
<div class="col-md-12 col-xs-12">
  <div id="get_category">
    <div class='divtitleCategoria'>
      <ul>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
        <li class='inline'>
          <a href='#' class=' inline btn btn-category text-uppercase'>aqui</a>
        </li>
      </ul>
    </div>
  </div>
</div>

答案 1 :(得分：0)

我认为您应该将

  • 标签包裹在
      父标签下。

    • 答案 2 :(得分：0)

    您显然正在使用Bootstrap，因此在删除所有CSS并仅使用基本的Bootstrap标记后，按钮的间距是均匀的。但是Button是内联元素，如果布局不正确，则是由于您的html / css组合覆盖了默认行为。

    此外，请记住，引导xs网格类（col-xs-*）始终保持水平状态，而与介质大小无关。

    .box {
  border: 10px solid #ccc;
  margin-bottom: 10px;
}

#ButtonsWithMoreMargin .btn {
  margin: 10px 5px;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Basic Buttons -->
<div class="row">
  <div class="col-md-12 col-xs-12">
    <div class="box">
      <a href='#' class='btn btn-default text-uppercase'>herehereherehere</a>
      <a href='#' class='btn btn-default text-uppercase'>hereherehereherehere</a>
      <a href='#' class='btn btn-default text-uppercase'>hereherehereherehere</a>
      <a href='#' class='btn btn-default text-uppercase'>hereherehereherehere</a>
    </div>
  </div>
</div>

<!-- Buttons With Margins -->
<div class="row">
  <div class="col-md-12 col-xs-12">
    <div id="ButtonsWithMoreMargin" class="box">
      <a href='#' class='btn btn-default text-uppercase'>herehereherehere</a>
      <a href='#' class='btn btn-default text-uppercase'>hereherehereherehere</a>
      <a href='#' class='btn btn-default text-uppercase'>hereherehereherehere</a>
      <a href='#' class='btn btn-default text-uppercase'>hereherehereherehere</a>
    </div>
  </div>
</div>

    相关问题
    最新问题