Float left does not work

Question

我想在我的wordpress小部件中放一個html代碼，在我的頁面頂部顯示一些內容，這裏是代碼，但是最後一個浮點數是我想要放在左邊的電話號碼按鈕已經在右邊，它只是不能很好地工作，它會保持在按鈕旁邊，我很欣賞你是否能幫我解決什麼是錯的，爲什麼。

謝謝。

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

問題是，你使用float:left爲<p tag.instead你需要用它來<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; 
 
}

<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

您正在嘗試浮動<li>內離開<p>當你實際上應該浮動<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

我做了兩個，你們說，它仍然沒有工作，看看它在網站上的東西

shop.chistagostar.com

Answer 4

試試這個：

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