Question

我尝试了很多解决方案来删除默认填充但位置为绝对，我想知道是否可以让我的面板宽度100％，并且 padding-left 0 但同时保持位置相对。

这是HTML：

 <div class="mainbody container-fluid " style="width:800px; margin:0 auto; 
    background-color: red">
 <div class="row">
     <div  class="col-lg-9 col-md-9 col-sm-12 col-xs-12">


        <div class="iduser">random
                    <span>
                       <div></div>
                    </span>
                 </div>
        <div  class="panel panel-default col-md-12">
           <div class="panel-body">
              <div class="pull-left">

                 <div class="panel-heading">random</div>
                 <div class="seperate"></div>
                  <div class="panel-body">
                    <p>random </p>
                 </div>
                 <div class="panel-footer"> random

                 </div> 
               </div>
        </div>
        </div>

      </div>

    </div> <!-- /.row -->
 </div>   <!-- /.main body-->

这是CSS：

  * {     /* Changing the round nav bar edges */
 border-radius: 0 !important;
 -moz-border-radius: 0 !important;
 }
 body {  /*Background properties*/
overflow-y: scroll;
background-color: #e9ebee;
}
.panel-default{    /* Context back panel*/

border-color: black;
height: 240px;
width: 540px;
position: absolute;
}

.panel-heading{    /* Tittle  */
background-color: brown;
width: 35em;
margin-left: 1px;
position: relative;  

}
.panel-body{    /*   main body */



}
.panel-footer{   /* Reacting panel footer */
background-color: gray;
position: relative;
width: 99.5%;
left: 0;
margin-left: 1px;
bottom: 0;
margin-bottom:1px;
border-top-width: 0px ;


/*padding: 0; when finished*/



}

.seperate{
 position: absolute; 
 border:1px solid #000;
 width: 99.5%;
 left: 1px;
}

This is how it looks like to me

Answer 1

由于您的要求不是填充和边距，因此方法有点复杂。我相信如果你有选择地和战略性地使用填充和边距，它会更容易。

您可以在\0000a0列表中的项目之间添加一些unicode转义空格字符ul作为填充。为此，您需要伪元素:after li标记

我的想法是在提供的链接中获取该网站布局

创建一个名为center_bar的子容器，并在其中添加ul列表

从Brand列表中取出带有ul标签的锚点，并将其添加到center_bar div中

现在，您的中心栏div中有两个元素1.您的Brand锚点和2. ul列表

以％center_bar为单位添加宽度并显示inline-block

在center_bar内向您的ul标签移动到右侧

为该浮动元素添加一个明确的修复

现在对center应用文字对齐nav-bar，以便内联块center_bar位于中间位置。

最近我能得到你就是这个..看看片段（确保你取出这个片段中的所有边框）

* {
  margin: 0;
  padding: 0;
}

.navbar {
  top: 0;
  position: fixed;
  width: 100%;
  background-color: rgb(114, 40, 114);
  text-align: center;
  font-size: 25px;
}

ul {
  list-style: none;
  flex-flow: row nowrap;
  background-color: rgb(114, 40, 114);
  justify-content: space-between;
  align-items: center;
}

ul #brand {
  text-align: center;
}

ul #about {}

ul #portfolio {}

ul #contact {}

ul li a:hover,
ul li a:focus {
  text-decoration: none;
  color: white;
}

ul li {
  float: right;
}

ul {
  border: solid black;
  display: inline-block;
  float: right;
}

#center_bar {
  width: 85%;
  border: solid green;
  display: inline-block;
  text-align: left;
}

#center_bar:first-child:after {
  content: "";
  display: block;
  zoom: 1;
  clear: both;
}

li:after {
  content: "\0000a0\0000a0\0000a0";
}

<div class="navbar">
  <div id="center_bar">
    <a href="#">Brand</a>
    <ul>
      <li id="about"><a href="#">About</a></li>
      <li id="portfolio"><a href="#">Portfolio</a></li>
      <li id="contact"><a href="#">Contact</a></li>
    </ul>
  </div>

</div>

是否可以在保持位置相对的同时删除默认填充？

1 个答案: