html - 网站左侧降低

问题描述

我网站的右侧和中间看起来正常，但左侧是下拉的。有人可以帮我解决这个问题吗？请全屏显示代码片段。这个盒子太小了，可以把所有东西都塞在一起。如果有人有修复或建议，请告诉我。我的网站是纯 html 顺便说一句。请注意，您可能会看到一些音频错误。在我的实际网站上，我有音乐和东西。
<html>
<!-- WEBSITE -->
<title> Auron's website </title>

<style>
  #container {
    display: flex;
  }
  
  #center {
    margin: auto;
  }
  /* Remaining CSS is identical to original */
  
  #p12 {
    display: flex;
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 2px;
    animation: typing 1.3s steps(20, end), blink-caret .75s steps(50, end) infinite;
  }
  
  #p12 {
    display: inline-flex;
  }
  /* The typing effect */
  
  @keyframes typing {
    from {
      width: 0
    }
    to {
      width: 100%
    }
  }
  /* The typewriter cursor effect */
  
  @keyframes blink-caret {
    from,
    to {
      border-color: transparent
    }
    50% {
      border-color: orange;
    }
  }
  
  audio {
    display: none;
  }
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid darkred;
    margin: 1em 0;
    padding: 0;
  }
  
  .test {
    width: 11em;
    border: 1px solid blue;
    word-wrap: break-word;
    position: absolute;
    right: 0px;
  }
</style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<body style="background-color:silver;">


  <audio controls volume="0.6" preload="auto" autoplay id="audio1" loop>
            <source src="kde.mp3" type="audio/mpeg">
         Your browser does not support this audio file.
        </audio>

  <span style="float:right;"> 
        <head>
<!-- INSERT JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var ampm = h >= 12 ? 'PM' : 'AM';
  h = h % 12;
  h = h ? h : 12; // the hour '0' should be '12'
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById("txt").style.color = "darkred";
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s + " " + ampm;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

var myAudio = document.getElementById("audio1");

function playPause() { 
    if (myAudio.paused) 
        myAudio.play(); 
    else 
        myAudio.pause(); 
} 
</script>
            

<!-- JQUERY CODE -->
<script>
$(document).ready(function(){
    $("#test").click(function(){
        $("#test").fadeOut(1000);
    });
});
</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-1488256319567534",
          enable_page_level_ads: true
     });
</script>                        
            
</head>
        <body onload="startTime()">
<div id="txt"></div>
        </span>
  <div id="container">
    <div id="center">
      <p id="p12" style="color:red;font-size:20px">
        <b>Welcome to my website!</b>
      </p>
    </div>
  </div>

  <center>
    <p style="color:blue">Hello, This my website. If you look at the code it's all wacky! Probably because i'm to lasy to organize it. Or just because i'm happy it works. Anyway, at-least the code runs correctly! Just so you know this was run on chrome. So if the website has
      random code on screen then that means it doesn't support your browser. Well, Bye! </p>
  </center>
  <!-- BORDER -->
  <hr color:darkred>
  <!-- BORDER -->
  <!-- COLOR FOR TEXT DO NOT CHANGE -->
  <span style="color:darkred">
    <P align=right style="margin-right: 140px;" class="update" id="hide"> Update List: </P> 

        <!-- UPDATE LIST -->
<span> <ul style="margin-right: 10px;" class="update test" id="hide">
    <li> 1.0 Website released! </li>
    <li> 1.1 Click copyright to hide. </li>
    <li> 1.2 Welcome sound added. </li>
    <li> 1.3 24 hour clock is now
         a 12 hour clock. </li>
    <li> 1.4 Website music! </li>
    <li> 1.5 Added pause/play button. </li>
    <li> 1.6 Ads </li>
    <li> 1.7 Added some animation!</li>
    </ul> </span>


  <!-- ACTUAL TEXT! -->
  <p align="center">
    If you find a bug or have a suggestion, click here: </p>
  <p align=middle> <a href=captcha.html>Email Link</a>
  </p>

  <!-- MAIN TEXT -->

  <i> I use KDE Neon
    <a href="https://neon.kde.org/">for my OS. </a> </i>
  <p> Click the link if you want to try it out! </p>

  <p>
    My Desktop is a <b>Custom Dell Inspiron 3656</b> SPECS:
  </p>
  <ul>
    <li>CPU: AMD A10-8700P 1.8 GHZ 4-core</li>
    <li>RAM: 12 GB DDR3</li>
    <li>HDD: 930 GB</li>
    <li>OS: Windows 10 Professional 64-bit</li>
    <li>SCREEN: 1920 X 1080</li>
  </ul>
  <p> Donate to KDE Neon or ReactOS! </p>
  <ul>
    <li> <a href="https://www.reactos.org/donating">ReactOS </a> </li>

    <li> <a href="https://www.kde.org/community/donations/">KDE Neon </a> </li>
  </ul>

  <p> Wanna try the OS before installing it? Try <a href="https://www.virtualbox.org/wiki/Downloads">VirtualBox! </a> </p>
  <p> My Youtube and Twitch channels!
    <ul>
      <li><a href="https://www.youtube.com/channel/UCMF9lXrFi9k4A1EHRKc3-fw">Youtube </a> </li>
      <li><a href="https://www.twitch.tv/mrmajik45">Twitch </a>
      </li>
    </ul>

    <!-- COPYRIGHT -->
    <p style="font-size:12px; position: fixed; bottom: 0; width:100%; text-align: center" id="test"> Auron's website © </p>


    <button style="position: fixed; bottom: 0;" onclick="playPause()">Play/Pause</button>

    <form style="position: fixed; bottom: 0; left: auto; right: 0; top: auto" action="calc.html">
      <input type="submit" value="Calculator" />
    </form>
    <!-- END OF CODE -->
</body>

</html>
标签： html
html - 网站左侧降低

问题描述

解决方案

推荐阅读
