Float links funktioniert nicht

Question

Ich möchte einen HTML-Code in meinem Wordpress-Widget, um etwas in der Spitze meiner Seite, hier ist der Code, aber der letzte Float, der die Telefonnummern, die ich in der linken Seite der Knopf, die schon in der rechten, es funktioniert einfach nicht gut und es wird direkt neben den Tasten bleiben, ich schätze, wenn Sie mir helfen können, was falsch ist und warum.

danke.

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

Problem ist, dass Sie float:left für <p verwenden tag.instead Sie es für <li> Tag verwenden müssen. bitte versuchen Sie diesen 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

Sie versuchen, innerhalb der <li> die <p> links zu schweben, wenn Sie die <li> links tatsächlich schweben sollte, etwa so:

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

ich habe beide der Dinge euch gesagt, es es immer noch nicht funktioniert hat, sehen Sie auf der Website

shop.chistagostar.com

Answer 4

Versuchen Sie folgendes:

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