Question

我是CSS和Boostrap的初学者。我想在列表的左侧添加按钮，但是当我设置float:left时，它会与下面的项重叠。它与以下绿色项目重叠。我尝试了拉左文本课，但他们没有工作。

我希望有人可以帮我解决这个问题吗？

这是我浏览器中的图片：

这是我的HTML代码：

＆＃13;

body{
  background:#f4f4f4;
}
@font-face {
            font-family: 'Google';
            src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
            url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
		
*{
	font-family: Google, Arial, Helvetica, sans-serif;
	direction: rtl;
}
/* Navbar */
.navbar{
  min-height: 33px !important;
  margin-bottom:0;
  border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
  padding-top:6px !important;
  padding-bottom:0 !important;
  height: 33px;
}

.navbar-default {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-toggle {
  border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffbbbc;
}

/* Custom */
.main-color-bg{
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
  color:#ffffff !important;
}

/* Header */
#header{
  background:#333333;
  color:#ffffff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

#header .create{
  padding-top: 20px;
}

/* Breadcrumb */
.breadcrumb{
  background:#cccccc;
  color:#333333;
}

.breadcrumb a{
  color:#333333;
}

.dash-box{
  text-align:center;
}

#login{
  margin-top:30px;
}

/* Footer */
#footer{
  background:#333333;
  color:#ffffff;
  text-align:center;
  padding:30px;
  margin-top:30px;
}


@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffbbbc;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

.loginlink{
	margin-top:10px;
	padding-top:10px;
	
}

.linkcolorfont{
	color: #000000;
	text-decoration: none;
}

a:hover{
    text-decoration: none;
	color: #555555;
}

img {

  display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {    
   .sort-right {
       float: right!important;
    }
}

.ltr {
    direction: LTR;
}

.bg-green{
	background-color: #5cb85c;
	color: #fff;
}

.run-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

#addcredit{
    
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
                    <div class="list-group">
                        <div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="float:left"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                        <div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
                        <div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
                        <div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                    </div>
                </div>

＆＃13;

Answer 1

您需要在该父类

中使用overflow:hidden;

body{
background:#f4f4f4;
}

@font-face {
font-family: 'Google';
src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

*{
font-family: Google, Arial, Helvetica, sans-serif;
direction: rtl;
}
/* Navbar */
.navbar{
min-height: 33px !important;
margin-bottom:0;
border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
padding-top:6px !important;
padding-bottom:0 !important;
height: 33px;
}

.navbar-default {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffbbbc;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-toggle {
border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffbbbc;
}

/* Custom */
.main-color-bg{
background-color: #e74c3c !important;
border-color: #c0392b !important;
color:#ffffff !important;
}

/* Header */
#header{
background:#333333;
color:#ffffff;
padding-bottom: 10px;
margin-bottom: 15px;
}

#header .create{
padding-top: 20px;
}

/* Breadcrumb */
.breadcrumb{
background:#cccccc;
color:#333333;
}

.breadcrumb a{
color:#333333;
}

.dash-box{
text-align:center;
}

#login{
margin-top:30px;
}

/* Footer */
#footer{
background:#333333;
color:#ffffff;
text-align:center;
padding:30px;
margin-top:30px;
}


@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
}

.loginlink{
margin-top:10px;
padding-top:10px;

}

.linkcolorfont{
color: #000000;
text-decoration: none;
}

a:hover{
text-decoration: none;
color: #555555;
}

img {

display: block;
margin: 0 auto;
}

@media only screen and (min-width: 992px) {    
.sort-right {
float: right!important;
}
}

.ltr {
direction: LTR;
}

.bg-green{
background-color: #5cb85c;
color: #fff;
}

.run-success{
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}

#addcredit{

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
<div class="list-group">
<div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>

<div class="list-group-item" style="overflow:hidden;"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="float:left"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
<div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
<div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
<div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
</div>
</div>

Answer 2

也许您可以尝试使用按钮上的绝对位置。

.btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: XXXX;
  height: XXXX;
}

所以你必须在父母的

上使用相对位置

.list-group-item {
  position: relative;
  width: XXXX;
  height: XXXX;
}

Answer 3

请检查一下。我使用.sort-right .list-group-item {float：left;宽度：100％;}

Mouse_Event

body{
  background:#f4f4f4;
}
@font-face {
            font-family: 'Google';
            src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
            url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
		
*{
	font-family: Google, Arial, Helvetica, sans-serif;
	direction: rtl;
}
/* Navbar */
.navbar{
  min-height: 33px !important;
  margin-bottom:0;
  border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
  padding-top:6px !important;
  padding-bottom:0 !important;
  height: 33px;
}

.navbar-default {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-toggle {
  border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffbbbc;
}

/* Custom */
.main-color-bg{
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
  color:#ffffff !important;
}

/* Header */
#header{
  background:#333333;
  color:#ffffff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

#header .create{
  padding-top: 20px;
}

/* Breadcrumb */
.breadcrumb{
  background:#cccccc;
  color:#333333;
}

.breadcrumb a{
  color:#333333;
}

.dash-box{
  text-align:center;
}

#login{
  margin-top:30px;
}

/* Footer */
#footer{
  background:#333333;
  color:#ffffff;
  text-align:center;
  padding:30px;
  margin-top:30px;
}


@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffbbbc;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

.loginlink{
	margin-top:10px;
	padding-top:10px;
	
}

.linkcolorfont{
	color: #000000;
	text-decoration: none;
}

a:hover{
    text-decoration: none;
	color: #555555;
}

img {

  display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {    
   .sort-right {
       float: right!important;
    }
}

.ltr {
    direction: LTR;
}

.bg-green{
	background-color: #5cb85c;
	color: #fff;
}

.run-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

#addcredit{
    
}
.sort-right .list-group-item{float:left; width:100%;}

Answer 4

我会为.list-group-item使用flexbox，并将按钮的右边距设置为自动。这也允许简单和完美的垂直对齐。

body{
  background:#f4f4f4;
}
@font-face {
            font-family: 'Google';
            src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
            url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
		
*{
	font-family: Google, Arial, Helvetica, sans-serif;
	direction: rtl;
}
/* Navbar */
.navbar{
  min-height: 33px !important;
  margin-bottom:0;
  border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
  padding-top:6px !important;
  padding-bottom:0 !important;
  height: 33px;
}

.navbar-default {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-toggle {
  border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffbbbc;
}

/* Custom */
.main-color-bg{
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
  color:#ffffff !important;
}

/* Header */
#header{
  background:#333333;
  color:#ffffff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

#header .create{
  padding-top: 20px;
}

/* Breadcrumb */
.breadcrumb{
  background:#cccccc;
  color:#333333;
}

.breadcrumb a{
  color:#333333;
}

.dash-box{
  text-align:center;
}

#login{
  margin-top:30px;
}

/* Footer */
#footer{
  background:#333333;
  color:#ffffff;
  text-align:center;
  padding:30px;
  margin-top:30px;
}


@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffbbbc;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

.loginlink{
	margin-top:10px;
	padding-top:10px;
	
}

.linkcolorfont{
	color: #000000;
	text-decoration: none;
}

a:hover{
    text-decoration: none;
	color: #555555;
}

img {

  display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {    
   .sort-right {
       float: right!important;
    }
}

.ltr {
    direction: LTR;
}

.bg-green{
	background-color: #5cb85c;
	color: #fff;
}

.run-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.list-group-item {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
                    <div class="list-group">
                        <div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
                        <div class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="margin-right: auto;"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                        <div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
                        <div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
                        <div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
                    </div>
                </div>

我怎么能不允许在CSS中重叠

4 个答案: