Question

我一直在学习PHP＆amp; HTML过去几天我遇到了问题。

尝试向ul添加保证金时，ul中的第一项无效。

这是我的style.css＆amp;的header.php：

的style.css：

* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

header {
    width: 100%;
    height: 60px;
    background-color: #222222;
}

nav ul {
    float: right;
    margin-top: 450px;
    margin-right: 950px;
}
nav ul li {
    font-size: 25px;
    color: grey;
    float: right;
}
nav ul li a {
    font-family: arial;
    font-size: 20px;
    color: grey;
}

nav ul form {
    font-size: 20px;

}
nav ul form input {
    float: left;
    border: groove;
    margin-right: 6px;
    font-size: 18px;
    text-align: center;
}
nav ul form button {
    float: left;
    margin-left: 74px;
    border: 3px solid grey;
    margin-right: 20px;
    background-color: white;
    color: grey;
    font-size: 25px;
    cursor: pointer;
}

的header.php：

<?php
    session_start();
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Registratie</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
    <nav>
        <ul>
            <li><a href="index.php">Home</a></li>
            <br>
            <li><a href="signup.php">Sign up</a></li>
            <br>
            <?php
                if (isset($_SESSION['id'])) {
                    echo "<form action='includes/logout.inc.php'>
                        <button>Log out</button>
                        </form>";
                } else {
                    echo "<form action='includes/login.inc.php' method='POST'>
                        <input type='text' name='uid' placeholder='Username'><br>
                        <input type='password' name='pwd' placeholder='Password'><br><br><br>
                        <button type='submit'>Log in</button>
                        </form>";
                }
            ?>
        </ul>
    </nav>
</header>

Here's an image to show what I mean

Answer 1

除li标签外，您不能将任何其他标签作为ul标签的子标签。你需要删除br标签。而且您需要在ul标签之外创建表单。

Answer 2

主要问题是从float: right;元素中删除li。另外，我更改并在片段中添加了一些边距，因为否则会超出可见区域。另外，我删除了br

中的这些无效ul元素

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

header {
  width: 100%;
  height: 60px;
  background-color: #222222;
}

nav ul {
  float: right;
  margin-top: 60px;
  margin-right: 80px;
}

nav ul li {
  font-size: 25px;
  color: grey;
  margin-left: 60px;
}

nav ul li a {
  font-family: arial;
  font-size: 20px;
  color: grey;
}

nav ul form {
  font-size: 20px;
}

nav ul form input {
  float: left;
  border: groove;
  margin-right: 6px;
  font-size: 18px;
  text-align: center;
}

nav ul form button {
  float: left;
  margin-left: 74px;
  border: 3px solid grey;
  margin-right: 20px;
  background-color: white;
  color: grey;
  font-size: 25px;
  cursor: pointer;
}

<header>
  <nav>
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="signup.php">Sign up</a></li>
      <?php
                if (isset($_SESSION['id'])) {
                    echo "<form action='includes/logout.inc.php'>
                        <button>Log out</button>
                        </form>";
                } else {
                    echo "<form action='includes/login.inc.php' method='POST'>
                        <input type='text' name='uid' placeholder='Username'><br>
                        <input type='password' name='pwd' placeholder='Password'><br><br><br>
                        <button type='submit'>Log in</button>
                        </form>";
                }
            ?>
    </ul>
  </nav>
</header>

Answer 3

这是我能想到的最好的：

<style>
* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

header {
    width: 100%;
    height: 60px;
    background-color: #222222;
}

nav ul {
    float: right;
    margin-top: 450px;
    margin-right: 950px;
}

    nav ul li {
        font-size: 25px;
        color: grey;
        /*float: right;*/
    }

        nav ul li a {
            font-family: arial;
            font-size: 20px;
            color: grey;
        }

    nav ul form {
        font-size: 20px;
    }

        nav ul form input {
            float: left;
            border: groove;
            margin-right: 6px;
            font-size: 18px;
            text-align: center;
        }

        nav ul form button {
            margin-left: 74px;
            border: 3px solid grey;
            margin-right: 20px;
            background-color: white;
            color: grey;
            font-size: 25px;
            cursor: pointer;
        }

.login {
    list-style: none;
    margin-left: -50px;
    text-align:center;
}
</style>

    <header>
    <nav>
        <!-- put your if statement here to create the form tag -->
        <form>
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="signup.php">Sign up</a></li>
                <li class="login">
                    <input type='text' name='uid' placeholder='Username'><br>
                    <input type='password' name='pwd' placeholder='Password'><br><br><br>
                    <button type='submit'>Log in</button>
                </li>
            </ul>
        </form>
    </nav>
</header>

<ul>中的第一项不允许保证金

3 个答案: