Question

这是我网页的顶级菜单按钮。我想把按钮放在同一条线上。

＆＃13;

<html>
        <div class = "row" style ="background-color:black;padding:0px;">
    <ul class = "menutop">
    <li><button type="button" class="navigatorbutton" id="navigatorbuttonid" onclick="swapMenuState()">Close Menu</button></li>
        <?php
        if(isset($_SESSION['id'])){
            echo "<li class = \"toplistright\"><form style=\"display: inline\" action=\"Data/LogOut.php\"><button type=\"submit\" class =\"logoutbutton\">Logout</button></form></li>";
            echo "<li class = \"toplistright\"><button type=\"button\" class=\"signupbutton\" onclick=\"openSignPage()\">Sign Up</button></li>";
        }else{
            echo "<li class = \"toplistright\"><button type=\"button\" class=\"loginbutton\" onclick=\"openLoginPage()\">Login</button></li>";
        }
        ?>
    </ul>
    </div>
</html>

＆＃13;

我认为问题在于此代码部分（或至少在此代码部分中是可修复的），如果没有，我将发布其余的相关代码。我不擅长三种语言中的任何一种，html，php或css。我无法看到问题所在。

Answer 1

您需要使用CSS display: inline-block，如下所示：

.menutop button, .menutop form {
    display: inline-block;
}

Answer 2

将包含关闭菜单按钮的li移至最后

<html>
    <div class = "row" style ="background-color:black;padding:0px;">
<ul class = "menutop">

    <?php
    if(isset($_SESSION['id'])){
        echo "<li class = \"toplistright\"><form style=\"display: inline\" action=\"Data/LogOut.php\"><button type=\"submit\" class =\"logoutbutton\">Logout</button></form></li>";
        echo "<li class = \"toplistright\"><button type=\"button\" class=\"signupbutton\" onclick=\"openSignPage()\">Sign Up</button></li>";
    }else{
        echo "<li class = \"toplistright\"><button type=\"button\" class=\"loginbutton\" onclick=\"openLoginPage()\">Login</button></li>";
    }
    ?>
<li><button type="button" class="navigatorbutton" id="navigatorbuttonid" onclick="swapMenuState()">Close Menu</button></li>
</ul>
</div>

Answer 3

你可以使用flex和margin：

/* reset for demo */

li {
  display: block;/* removes bullet*/
  margin:2px;
}

ul {
  padding: 0;
}

.row {
  background-color: black;
  padding: 0px;
}

form {
  display: inline;
}


/* ================ */
/* flex layout demo */
/* ================ */

.menutop {
  display: flex;
}

li:nth-child(1) {
  margin-right: auto;
}

li:nth-child(2) {
  margin-left: auto;
}

li,
button {
  background: linear-gradient(to bottom, #EE2A2B, #A60A14);
  border: none;
  box-shadow: inset 0 -2px 1px #Ee5050;
  border-radius: 3px;
}

button {
  padding: 3px 1em;
  color:silver
}

<div class="row">
  <ul class="menutop">
    <li><button type="button" class="navigatorbutton" id="navigatorbuttonid" onclick="swapMenuState()">Close Menu</button></li>
    <li class="toplistright">
      <form action="Data/LogOut.php"><button type="submit" class="logoutbutton">Logout</button></form>
    </li>
    <li class="toplistright"><button type="button" class="signupbutton" onclick="openSignPage()">Sign Up</button></li>
  </ul>
</div>

修改

可以避免列表

.row {
  background-color: black;
  padding: 3px;
  display: flex;
}

button:nth-child(1) {
  margin-right: auto;
}

button:nth-child(2) {
  margin-left: auto;
  margin-right: 3px;
}

button {
  background: linear-gradient(to bottom, #EE2A2B, #A60A14);
  border: none;
  box-shadow: inset 0 -2px 1px #Ee5050;
  border-radius: 3px;
  padding: 3px 1em;
  color: silver
}

<form action="Data/LogOut.php" class="row">
  <button type="button" class="navigatorbutton" id="navigatorbuttonid" onclick="swapMenuState()">Close Menu</button>
  <button type="submit" class="logoutbutton">Logout</button>
  <button type="button" class="signupbutton" onclick="openSignPage()">Sign Up</button>
</form>

float方法

.row {
  background-color: black;
  text-align: right;
  padding: 2px;
}

.navigatorbutton {
  float: left;
}

button {
  background: linear-gradient(to bottom, #EE2A2B, #A60A14);
  border: none;
  box-shadow: inset 0 -2px 1px #Ee5050;
  border-radius: 3px;
  padding: 3px 1em;
  color: silver
}

<form action="Data/LogOut.php" class="row">
  <button type="button" class="navigatorbutton" id="navigatorbuttonid" onclick="swapMenuState()">Close Menu</button>
  <button type="submit" class="logoutbutton">Logout</button>
  <button type="button" class="signupbutton" onclick="openSignPage()">Sign Up</button>
</form>

将菜单按钮并排放在HTML / CSS

3 个答案:

修改