我的div之间的间隔不适用于float和margin

Question

I have two divs like this:

First div :

 <div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px"> <div class="container-fluid"> <div class="row"> <span class="user" style="color:#000a75;font-weight:bold">Général</span> </div> </div> </div> 

Second div :

 <div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px"> <i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i> </div> 

This two div are in :

 <a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;width:400px;margin-left:4px;margin-right:0em" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a"> <div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px"> <div class="container-fluid"> <div class="row"> <span class="user" style="color:#000a75;font-weight:bold">Général</span> </div> </div> </div> <!--Collaspe zone--> <div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px"> <i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i> </div> </a> 

Here what it looks like :

I want the space between the div to be greater than this , so i have tried with float and with margin but i have the same problem.

So i want the icon of expand more to be in the right margin 0 now it is in the center.

Answer 1

I think your codes is not completely posted here, so we have a difference in viewing. But I see in your codes, the width has been set as fixed value 400px . That's why the icon could not move to right. Please remove the width:400px; in the a tag.

Maybe when you run code at your side, the a tag has been set display: block/inline-block .etc.. So you can see it can not move to right. That why we can not understand what you want.

Answer 2

Something like this? I need more details.
Just used d-flex from bootstrap.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <!-- just to show it whit boostrap --> <a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a"> <div class="d-flex" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;"> <div> <span class="user" style="color:#000a75;font-weight:bold">Général</span> </div> <!--Collaspe zone--> <div class="ml-auto px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false"> <i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i> </div> </div> </a> 

Answer 3

My problem was solved ! i followed this exemple

 <div class="container"> <div class="row"> <div class="col-sm"> <div class="row"> <span class="user" style="color:#000a75;font-weight:bold">Général</span> </div> </div> <div class="col-sm"> <div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px"> <i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i> </div> </div> </div> </div>