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; 
}