Question

我无法将提交按钮放在网页的底部。我已将listDiv和DropDwnDiv内联到彼此中。如果我删除浮动左和浮动右属性，然后我看到提交按钮位于底部。我在这里缺少什么？以下是我的第一部分代码。任何类型的输入/反馈都非常感谢。将我的代码分为头部和主体两部分，因为如果帖子的内容是更多的代码和更少的文本，则堆栈溢出不允许我发布代码。

 h1 {
  padding : 10px 40px 10px 40px;
  width: 1000px;
  background: grey;
  font-size: 40;
  font-family: times-roman;
  margin:70px;
 }
    p {
     color:black;
     text-align:center;
    }

   ol {
    background:#ff9999;
    width: 1000px;
    padding : 40px;
    margin : 70px;
    font-family: Arial;
    font-size: 20;
    }

    #MainDiv {
      background: grey;
      padding: 40px;
      margin: 70px;
      font-size:20;
      width: 1000px;
      height: 500px;
    }

  #UnameDiv {
      background: grey;
      display: block;
      text-align: center;
      font-size:20;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    #textareaDiv {
      background: grey;
      display : block;
      text-align:center;
      padding-bottom: 10px;
    }

   #listDiv {
      float: right;
      background:grey;
      font-size: 15;
      padding: 30px;
      margin-top: 70px;
      margin-right: 70px;
    }

    #DropDwnDiv {
      float : left;
      background:grey;
      font-size: 15;
      padding: 30px;
      margin-top: 70px;
      margin-left: 70px;
    }

    #subDiv {
      background:grey;
      float: initial;
      margin-top: 20px;
      display:block;
      text-align: center;
    }

Answer 1

将此样式添加到包含提交按钮的段落中。

<p style="overflow: auto; width: 100%;">
<input type="submit" name="submit" value="SUBMIT">
</p>

Answer 2

请遵循以下编码风格：

输入标记是自闭标记
当您使用float:***时，请务必将其清除clear: both
永远不要使用p tag

在提交按钮之前使用<br style="clear: both;" />

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		h1 {
  padding : 10px 40px 10px 40px;
  width: 1000px;
  background: grey;
  font-size: 40;
  font-family: times-roman;
  margin:70px;
 }
    p {
     color:black;
     text-align:center;
    }

   ol {
    background:#ff9999;
    width: 1000px;
    padding : 40px;
    margin : 70px;
    font-family: Arial;
    font-size: 20;
    }

    #MainDiv {
      background: grey;
      padding: 40px;
      margin: 70px;
      font-size:20;
      width: 1000px;
      height: 500px;
    }
    #UnameDiv {
      background: grey;
      display: block;
      text-align: center;
      font-size:20;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    #textareaDiv {
      background: grey;
      display : block;
      text-align:center;
      padding-bottom: 10px;
    }

   #listDiv {
      float: right;
      background:grey;
      font-size: 15;
      padding: 30px;
      margin-top: 70px;
      margin-right: 70px;
    }
    #DropDwnDiv {
      float : left;
      background:grey;
      font-size: 15;
      padding: 30px;
      margin-top: 70px;
      margin-left: 70px;
    }

    #subDiv {
      background:grey;
      float: initial;
      margin-top: 20px;
      display:block;
      text-align: center;
    }
    
	</style>
</head>
<body>
<h1 id="test">
    <p> THIS IS 
        <strong>MY</strong> WEBPAGE 
    </p>
</h1>
<ol>
    <li> 'ZX14R'</li>
    <li>'MULTISTRADA 1200S'</li>
    <li>'TRIUMP TIGER 1200'</li>
</ol>
<div id='MainDiv'>
    <form action="xyz.php", method="get">
        <div id='UnameDiv'>
            <p> 
            	USERNAME:- <input type="label" placeholder='ENTER USERNAME' name="label" />
            </p>
            <p> 
            	PASSWORD:- <input type="password" value='*****' name="passwd" />
            </p>
        </div>
        <div id='textareaDiv'>
            <textarea rows="5" cols="35" placeholder= "ENTER DESCRIPTION HERE"></textarea>
        </div>
        <div id='DropDwnDiv'>
            <p>
                <b> WHICH CITY YOU BELONG TO</b>
            </p>
            <input type="radio" name="radio" value="BANGALORE" checked/>BANGALORE
            <br>
                <input type="radio" name="radio" value="MUMBAI"/>MUMBAI
                <br>
                    <input type="radio" name="radio" value="DELHI"/>DELHI
        </div>
        <div id='ListDiv'>
                <b>SELECT YOUR FAV CINEMA TYPE</b>
            <select>
                <option> 'PVR CINEMAS'</option>
                <option> 'INOX CINEMAS' </option>
                <option>'FAME CINEMAS'</option>
            </select>
        </div>
        <br style="clear: both;" />
        <div id='subDiv'>
                <input type="submit" name="submit" value="SUBMIT"/>
        </div>
       </form>
   </div>
</body>
</html>

＆＃13;

提交不显示在底部的div

2 个答案: