怪异的" |"在我的HTML页面顶部?

时间:2017-09-09 02:53:04

标签: html css

我遇到了这个问题,我认为这可能是我的编码。 A" |"出现在我的屏幕顶部。我在代码中找不到它。就在那里" |"我想插入我的一张图片。有人可以帮忙找到这个" |"是什么?

非常感谢你帮助我的人:)我很感激!

Weird "|"

其实!这是一次更新!我发现了什么是错的,为什么会出现!哪里有边缘,边界和背景。一旦我摆脱了那三个,线就消失了!

感谢你们帮助我的人!

代码:

<html lang="en">

<head <p><small>{PEBKAC} &#169; 2017</small></p>

<title>{PEBKAC} - Log In or Sign Up</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>

<bodystyle="background-color:white;">

<br> <br> <br>

<style>

div1 {
 border: 1px solid black;
 margin-top: -70px;
 margin-bottom: -30px;
 margin-right: 250px;
 margin-left: 930px;
 background-color: powderblue;
 text-align: center;
}

</style>

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 

<div1>
<div class="container">

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#login">Log In</a></li>
  <li><a data-toggle="tab" href="#signup">Sign Up</a></li>
</ul>

<div class="tab-content">

  <div id="login" class="tab-pane fade in active">
    <form>

      <br><br><br><br><br><br>

      E-mail:<br>
      <input type="text" name="e-mail"><br><br>
      Password:<br>
      <input type="password" name="psw"><br><br>

      <button type="button">Log In!</button><br><br>
    </form>
  </div>

  <div id="signup" class="tab-pane fade">
    <form action="/action_page.php">

      <br><br><br><br><br><br>

      Username:<br>
      <input type="text" name="Username"><br><br>
      E-mail:<br>
      <input type="email" name="e-mail"><br><br>
      Password:<br>
      <input type="password" name="psw"><br><br>
      <p>By clicking Sign Up, you agree to our <a href="file:///C:/Users/White-Chocolate/Desktop/TypeTwister/Terms.html">Terms</a> and <a href="file:///C:/Users/White-Chocolate/Desktop/TypeTwister/Privacy%20Policy.html">Privacy Policy</a>. <br> 
<br>
      <button type="button">Sign Up!</button>
    </form>
  </div>

</div>
</div> 
</div> 
</body>
</html>

3 个答案:

答案 0 :(得分:0)

那是<div1>元素。

顺便说一下,这在技术上是无效的HTML。将您的CSS更改为#div1 {,将该元素的HTML更改为<div id="div1">

答案 1 :(得分:0)

问题在于<div1>元素。删除1。 如果您想给它自己的CSS样式,请改用id

答案 2 :(得分:0)

你给border: 1px solid black; css div1提出了奇怪的问题“|”从技术上讲,你的HTML代码不合适。

<html lang="en">

<head>
  <p><small>{PEBKAC} &#169; 2017</small> </p>
  <title>{PEBKAC} - Log In or Sign Up</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">       </script>
</head>

<body style="background-color:white;">
  <br>
  <br>
  <br>
  <style>
    div1 {
      /*border: 1px solid black;*/ this css generated weird "|"
      margin-top: -70px;
      margin-bottom: -30px;
      margin-right: 250px;
      margin-left: 930px;
      background-color: powderblue;
      text-align: center;
    }
  </style>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div1>
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#login">Log In</a> </li>
        <li><a data-toggle="tab" href="#signup">Sign Up</a> </li>
      </ul>
      <div class="tab-content">
        <div id="login" class="tab-pane fade in active">
          <form>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br> E-mail:
            <br>
            <input type="text" name="e-mail">
            <br>
            <br> Password:
            <br>
            <input type="password" name="psw">
            <br>
            <br>
            <button type="button">Log In!</button>
            <br>
            <br></form>
        </div>
        <div id="signup" class="tab-pane fade">
          <form action="/action_page.php">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br> Username:
            <br>
            <input type="text" name="Username">
            <br>
            <br> E-mail:
            <br>
            <input type="email" name="e-mail">
            <br>
            <br> Password:
            <br>
            <input type="password" name="psw">
            <br>
            <br>
            <p>By clicking Sign Up, you agree to our <a href="file:///C:/Users/White-Chocolate/Desktop/TypeTwister/Terms.html">Terms</a> and <a href="file:///C:/Users/White-Chocolate/Desktop/TypeTwister/Privacy%20Policy.html">Privacy Policy</a>.</p>
              <br>
              <br>
              <button type="button">Sign Up!</button>
          </form>
        </div>
      </div>
    </div>
    </div>
</body>

</html>