Question

请原谅我这个问题是否基本 - 我是新来的代码!!我遇到了格式化引导程序的问题。现在，表单重叠标题。我该怎么做才能解决这个问题？我尝试过使用bootstrap表单和简单表单，如下面的代码所示。但它一直搞乱格式！我很感激任何帮助......提前谢谢！

<!doctype html>
<html>

<head>

<meta charset=utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href=styles/main.css>


<title>grab.</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />



<style>

nav {
    width: 100%; 
    padding: 80px;
    }

body { padding-top: 70px;
    padding-bottom: 70px
    }



form {
    position: fixed;
    top: 230px;
    left: 800px;
    width: 100px;
    height: 100px;
}


</style>


<div class=container>
    <!-- Second navbar for sign in -->
    <nav class="navbar navbar-default">


        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="container-fluid">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

          </button>
          <a class="navbar-brand" href="index.html">
  <img src="images/grab.jpg" width="100" height="100" class="d-inline-block align-top" alt="logo">

       </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-2">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="about.html"  style="display:inline" >About Us</a></li>
            <li><a href="faq.html" style="display:inline" >FAQ</a></li>
            <li>
              <a class="btn btn-warning btn-outline btn-circle collapsed" style="display:inline" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse1">Sign Up</a>
              <a class="btn btn-warning btn-outline btn-circle collapsed" style="display:inline" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2">Log In</a>
            </li>
          </ul>
          <div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse1">
                       <form class="navbar-form navbar-right form-inline" role="form">
              <div class="form-group">
                <div class="form-group">
                <label class="sr-only" for="Username">Username</label>
                <input type="username" class="form-control" id="Username" placeholder="Username" required />
              </div>
                <label class="sr-only" for="Email">Email</label>
                <input type="email" class="form-control" id="Email" placeholder="Email" autofocus required />
              </div>
              <div class="form-group">
                <label class="sr-only" for="Password">Password</label>
                <input type="password" class="form-control" id="Password" placeholder="Password" required />
              </div>
              <button type="submit" class="btn btn-warning">Submit</button>
              </form>
          </div>
        </div><!-- /.navbar-collapse -->

        <div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse2">
            <form class="navbar-form navbar-right form-inline" role="form">
              <div class="form-group">
                <label class="sr-only" for="Username">Username</label>
                <input type="username" class="form-control" id="Username" placeholder="Username" />
              </div>
              <div class="form-group">
                <label class="sr-only" for="Password">Password</label>
                <input type="password" class="form-control" id="Password" placeholder="Password" required />
              </div>
              <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
              <button type="submit" class="btn btn-warning">Submit</button>
              </form>
          </div>
        </div><!-- /.navbar-collapse -->

    </nav><!-- /.navbar -->
</div>


</head>

<body>


<div class="container">

        <h1>Futurama Character Bio</h1>
        <form action="processing-page.php" method="POST" enctype='multipart/form-data'>
             File: <input type='file' name='profilepic' />


            <label for="characterName">Character Name</label>
            <input type="text" name="character" id="characterName" />
            <br>

            <label for="genderM">Male</label>
            <input type="radio" name="gender" id="genderM" value="Male"/>

            <label for="genderF">Female</label>
            <input type="radio" name="gender" id="genderF" value="Female"/>


            <label for="genderX">X</label>
            <input type="radio" name="gender" id="genderX" value="X"/>

            <label for="genderZ">zhe</label>
            <input type="radio" name="gender" id="genderZ" value="zhe"/>
            <br>
            <label for="morals">Morals</label>
            <input type="checkbox" name="morals" id="morals"/>
<br>
            <textarea name="bio" rows="10" cols="20"></textarea>
<br>
            <select name="planet">
                <option value="1">Earth</option>
                <option value="2">Gorgolon</option>
                <option value="3+">Mars</option>
            </select>

            <input type="submit" name="submit" />

        </form>
    </body>


</div><!-- content container -->






</body>
 </html>

Answer 1

position: fixed;

下的问题

form {
    position: fixed;
    top: 230px;
    left: 800px;
    width: 100px;
    height: 100px;
}

表格格式不正确

1 个答案: