Question

在基本的HTML和CSS中，我正在尝试将提交和重置输入按钮放在textarea下面。我到处寻找并且找不到类似的东西。

基本上当我不添加所有的break标签时，按钮位于textarea上方（并覆盖文本，但这是因为它们的div类具有其位置的绝对属性）。如果我没有绝对位置，按钮将自己置于导航栏下方。

我对于为什么会发生这种情况感到很困惑，因为它的中心没有绝对属性，而且按钮在没有换行符的情况下不会低于textarea。任何帮助将不胜感激（我的猜测是它与CSS有关，但我不确定为什么）。

<!doctype.html>
<meta http-equiv="X-UA-Compatible" content="IE-edge"/>
 <meta charset="utf-8">
<html>
 <head>
   <title> Comments </title> 
<link href= "/styles.css" rel = "stylesheet" type = "text/css">
<style>
        textarea
        {
        margin-top: 15px;
        float:left;
        resize: none;
        }
        .comment_form
        {
        margin-top:15px;
        float: left;
        text-align: left;
        Color: #DEDBA7;
        margin-bottom:15px;
        }
        .button {
        float: left;
        margin-top:15px;
        position: absolute;
        }
   </style>
 </head>
 <body>
  <header> <h1> Comments </h1> </header>
    <div class="nav_bar">
          <div class="comment">
    <li><a href="index.html" class="homeLink">Home</a></li>
    <li><a href="about.html" class="aboutLink">About Us</a></li>
    <li><a href="projects.html" class="projectLink">Projects</a></li>
    <li><a href="/eric/blog.html" class="blogLink">Blog</a></li>
    <li><a href="/ops/comment.html" class="commentLink">Feedback</a></li>
    <li><a href="/ops/links.html" class="linksLink">Links</a></li>
         </div>
        </div>
<br>
<br>

  <p> Feel free to leave a comment below, don't expect anyone to read it though...
  </p>
  <form name="comment"  method="post" >
<!-- First off should probably use some AJAX or PHP to get this somewhere, Eventually this needs to be a get to the webserver to go into a psql base -->
<p> <div class="comment_form"> Enter your comment below: </p>
<p><textarea  name="comment" cols="50" rows="5"> </textarea>
</p>
</div>
<p>
<div class="button">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input type ="submit" value="Submit" onclick='alert("Thanks for your input, we&#39ll make sure to keep it in mind")' />
<input type="reset" value="Erase Comment" />
</div>
</p>
</form>
  </body>

</html>

CSS

/* This is a comment, and the main style sheet */

/* reset browser styles */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1.2;
}
ol {
        padding-left: 1.4em;
        list-style: decimal;
}
ul {
        padding-left: 1.4em;
        list-style: square;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}
/* end reset browser styles */

body {
 background-color: #1F7872;
 border: 3px solid rgb(0,0,0);
 box-shadow: 0 0 15px 5px #1D4C4F;
 width: 80%;
 margin-bottom: 20px;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 padding: 10px 15px 0px 15px;
 padding-bottom: 80%;
}



header { height: 50px;
         background-color:  #1A202C;
         padding: 10px 10px 10px 10px;
     border-left: 100px;
     border-right: 100px;
         border-bottom: 2px solid #000;     
     margin-right: -15px;
     margin-left: -15px;

     text-align: center;
                }
        h1 {
        font-size: 2.5em;
        font-family: Arial;
/*        margin-top: 7px; */
    color: aqua;
/*  border-right: 1000px;
    border-left: 1000px; */
        }


html{
 background-color: #1A202C;
}
p{
 color: #DEDBA7;
}
h2{
 padding-top: 20px;
 color: #DEDBA7;
 font-size: 1.5em;
}

a {
 color: #FF00FF;
}

.nav_bar {
  margin-top: -2px;
  margin-left: -17px;
  list-style: none;
  border-left: 2px solid #000;
  overflow: hidden;
  float: left; 
  padding-left: 16%;
  margin-bottom: 0px;  
}


.nav_bar li {
 float: left;
 width: 8em;
 text-align: center;
}

.nav_bar a {
  color: aqua;
  font-size: 12px;
  text-decoration: none;
  border: 2px solid #000;
  /* border-left: none; */
  padding: 7px 5px 7px 5px;  
  display: block;
  /*background-color: #E7E7E7; */
  background-color: #1A202C;

  /*
  background-repeat: no-repeat;
  background-position: 0 2px;
  */
}

.nav_bar a:hover {
  font-size: 14px;
  padding: 6px 5px 6px 5px;
  font-weight: bold;
  color: #FF00FF;
  background-color: #DEDBA7;
}



.home .homeLink,
.about .aboutLink,
.project .projectLink,
.blog .blogLink,
.comment .commentLink,
.links .linksLink
{
  font-size:14px;
  font-weight: bold;
  background-color: aqua;
  padding: 6px 5px 6px 5px;
  font-weight: bold;
  color: #1A202C;
}

.tline {
  margin-left: -15px;  
}

Answer 1

你的.button设置为position：absolute; - 这意味着它的位置将忽略任何其他对象，并被迫显示你告诉它的确切位置。您没有指定任何位置，因此它显示在顶部。

从CSS中删除该行。

输入按钮不会低于textarea形式

1 个答案: