html - How can I not allow overlapping in CSS -
i'm beginner css , boostrap. want add button left side of list, overlaps item below when set float:left. overlaps following green item. tried pull-left text-left class didn't work.
i hope can me fix it?
here picture in browser :
here html code:
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 > { 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 > { 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 screen , (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"><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>
i use flexbox .list-group-item , set right margin button auto. allows easy , perfect vertical alignment.
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 > { 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 > { 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 screen , (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>
Comments
Post a Comment