Float à gauche ne fonctionne pas

Question

Je veux mettre un code html dans mon widget wordpress, pour montrer quelque chose en haut de ma page, voici le code, mais le dernier flotteur qui est les numéros de téléphone que je veux mettre dans la gauche de la bouton qui sont déjà dans le bon, c'est juste ne fonctionne pas bien et il restera juste à côté des boutons, j'apprécie si vous pouvez m'aider ce qui ne va pas et pourquoi.

merci.

section ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: white; 
 
} 
 

 
section li { 
 
    float: right; 
 
    border-right: 5px solid; 
 
    border-color: white; 
 
} 
 

 
section li:last-child { 
 
    border-right: none; 
 
} 
 

 
section li p { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
section .button { 
 
    display: inline-block; 
 
    border-radius: 10px; 
 
    background-color: #955251; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    width: 120px; 
 
    height: 45px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
    align-items: center; 
 
} 
 

 
section .button span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 

 
section .button span:after { 
 
    content: '\00bb'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 

 
section .ultopnav a:link:active, 
 
a:visited:active { 
 
    color: white; 
 
    text-decoration: none; 
 
    cursor: auto; 
 
} 
 

 
section .ultopnav a:link { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
section .ultopnav a:visited { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
.ultopnav .floatleft { 
 
    color: black; 
 
    font-size: 14px; 
 
}

<section> 
 
    <ul class="ultopnav"> 
 
    <li><button class="button" style="vertical-align:middle"><span><a 
 
href="http://www.chistagostar.com">خانه </a></span></button></li> 
 

 
    <li><button class="button" style="vertical-align:middle"><span><a 
 
href="http://www.shop.chistagostar.com">صفحه اول فروشگاه </a></span> 
 
</button></li> 
 

 
    <li> 
 
     <p class="floatleft" style="float: left;">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p> 
 
    </li> 
 
    </ul>

Answer 1

problème est que vous utilisez pour float:left<p tag.instead vous devez l'utiliser pour la balise <li>. s'il vous plaît essayer ce code ..

section ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
background-color: white; 
 
} 
 

 
section li { 
 
float: right; 
 
border-right:5px solid; 
 
border-color: white; 
 
} 
 

 
section li:last-child { 
 
border-right: none; 
 
} 
 

 

 
section li p { 
 
display: block; 
 
color: black; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
section .button { 
 
display: inline-block; 
 
border-radius: 10px; 
 
background-color: #955251; 
 
border: none; 
 
color: #FFFFFF; 
 
text-align: center; 
 
font-size: 16px; 
 
width: 120px; 
 
height: 45px; 
 
transition: all 0.5s; 
 
cursor: pointer; 
 
margin: 5px; 
 
align-items: center; 
 
} 
 

 
section .button span { 
 
cursor: pointer; 
 
display: inline-block; 
 
position: relative; 
 
transition: 0.5s; 
 
} 
 

 
section .button span:after { 
 
content: '\00bb'; 
 
position: absolute; 
 
opacity: 0; 
 
top: 0; 
 
right: -20px; 
 
transition: 0.5s; 
 
} 
 

 
section .ultopnav a:link:active, a:visited:active { 
 
color: white; 
 
text-decoration: none; 
 
cursor: auto; 
 
} 
 

 

 
section .ultopnav a:link { 
 
text-decoration: none; 
 
color: white; 
 
} 
 

 
section .ultopnav a:visited { 
 
text-decoration: none; 
 
color: white; 
 
} 
 
.ultopnav .floatleft { 
 
color: black; 
 
font-size: 14px; 
 
}

<section><ul class="ultopnav"> 
 
<li><button class="button" style="vertical-align:middle"><span><a 
 
href="http://www.chistagostar.com">خانه </a></span></button></li> 
 

 
<li><button class="button" style="vertical-align:middle"><span><a 
 
href="http://www.shop.chistagostar.com">صفحه اول فروشگاه </a></span> 
 
</button></li> 
 

 
<li style="float: left;"><p class="floatleft">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p></li> 
 
</ul> 
 
</section>

Answer 2

Vous essayez de faire flotter le <p> gauche dans le <li> lorsque vous devez en fait flotter la gauche, comme si <li>:

section ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
background-color: white; 
 
} 
 

 
section li { 
 
float: right; 
 
border-right:5px solid; 
 
border-color: white; 
 
} 
 

 
section li:last-child { 
 
border-right: none; 
 
} 
 

 

 
section li p { 
 
display: block; 
 
color: black; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
section .button { 
 
display: inline-block; 
 
border-radius: 10px; 
 
background-color: #955251; 
 
border: none; 
 
color: #FFFFFF; 
 
text-align: center; 
 
font-size: 16px; 
 
width: 120px; 
 
height: 45px; 
 
transition: all 0.5s; 
 
cursor: pointer; 
 
margin: 5px; 
 
align-items: center; 
 
} 
 

 
section .button span { 
 
cursor: pointer; 
 
display: inline-block; 
 
position: relative; 
 
transition: 0.5s; 
 
} 
 

 
section .button span:after { 
 
content: '\00bb'; 
 
position: absolute; 
 
opacity: 0; 
 
top: 0; 
 
right: -20px; 
 
transition: 0.5s; 
 
} 
 

 
section .ultopnav a:link:active, a:visited:active { 
 
color: white; 
 
text-decoration: none; 
 
cursor: auto; 
 
} 
 

 

 
section .ultopnav a:link { 
 
text-decoration: none; 
 
color: white; 
 
} 
 

 
section .ultopnav a:visited { 
 
text-decoration: none; 
 
color: white; 
 
} 
 
.ultopnav .floatleft { 
 
color: black; 
 
font-size: 14px; 
 
}

<body> 
 

 
<section> 
 
    <ul class="ultopnav"> 
 
    <li> 
 
     <button class="button" style="vertical-align:middle; align: right"> 
 
     <span><a 
 
href="http://www.chistagostar.com">خانه </a></span> 
 
     </button> 
 
    </li> 
 

 
    <li> 
 
     <button class="button" style="vertical-align:middle"> 
 
     <span><a 
 
href="http://www.shop.chistagostar.com">صفحه اول فروشگاه </a></span> 
 
     </button> 
 
    </li> 
 

 
    <li style="float: left;"> 
 
     <p class="floatleft">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p> 
 
    </li> 
 
    </ul> 
 
</section> 
 

 
</body>

Answer 3

je l'ai fait les deux choses que vous les gars dit, il fonctionne toujours na pas, regardez dans le site

shop.chistagostar.com

Answer 4

Essayez ceci:

section li:last-child { 
    border-right: none; 
    float: left; 
}