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

问题是您使用SELECT StudFirstName, StudLastName, sc.ClassID, sub.SubjectID, sub.CategoryID, Grade FROM SS_Students as st INNER JOIN SS_Student_Schedules as ss ON st.StudentID = ss.StudentID INNER JOIN SS_Classes as sc ON ss.ClassID = sc.ClassID INNER JOIN SS_Subjects as sub ON sc.SubjectID = sub.SubjectID; float:left tag.instead，您需要将其用于<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;
}

Answer 2

当你真正浮动<p>时，你试图将<li>左移<li>，如下：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个：

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

漂浮左边不起作用

3 个答案: