Question

我在这里有一个奇怪的情况，试图将我的按钮input[type="submit"]向右浮动。

我在那里有空间，所以我将按钮浮动到右边，站在输入文本旁边。

但浮动不起作用，按钮不会以任何方式向右移动。

我的jsfiddle有问题说明：

我的Html：

<footer id="footer-container">
    <section id="footer1">
      <div id="col">             
         <h1>NEWSLETTER</h1>
         <p>Register in our Newsletter.</p>

         <form action="" name="newsletter" method="post" enctype="multipart/form-data">
            <label id="email-label2">
             <i class="fa fa-envelope-o"></i>
             <input type="text"id="email2" name="email" placeholder="e-mail"  required/>
            </label>http://jsfiddle.net/#save
            <br />
            <label id="submit">
              <input type="hidden" name="news_register" value="register" />
              <input type="submit" name="register" value="Register" src="" />
            </label>     
         </form>
     </div>
    </footer>

我的Css：

#footer-container
{
    width:100%; 
    float:left; 
    background:brown; 
    height:auto;    
}

#footer1
{
    width:320px;
    margin:15px 10px 15px 10px;
    height:auto;    

}

#col
{
    float:left;
     margin-right:53px;

}

#col h1
{
    border-bottom:1px dashed #ccc;
    font-family:'bariol_boldbold';
    color:#fff; 
    width:300px;
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 
}


#col p
{
    width:300px;
    color:#fff;
    text-align:justify;
    color:#ccc; 
    font-size:14px; 
    font-family:'bariol_regularregular'; 
    margin-bottom:10px;
}  



input[type="text"] 
{
    font-size: 14px;
    line-height: 20px;
    padding: 4px 3px;

}

#email2 
{
    padding-left: 20px;
    text-indent:5px;
    width:172px;
    height:18px;
     -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family:'Tahoma';
    font-size:14px;
    color:#000;
}



input[type="submit"]
{
    float:right; 
    margin-right:5px;
    text-align: left;
    font-family: 'Tahoma';
    font-size: 14px;
    color: #333;
    margin-top:10px;
    outline:none;
    background: blue; 
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline:none;
    cursor: pointer;
    color:#fff;
    width: 70px;
    height: 26px;
    text-align:center;
    border:1px solid #3c3412; 
    margin-bottom:15px;

}

Answer 1

你在语义和破坏标签方面遇到了一些问题。我修复了它并更新了CSS： http://jsfiddle.net/5Nq2N/3/

提示：

不要在标签元素中放置输入字段。标签应描述输入字段并位于其上方。 <label for="email">Enter your email</label>
将容器中的物品放入容器中，容器将相互堆叠。
清除你的花车;）
阅读Andy Budd的CSS Mastery，它是一个很好的基础。

enter image description here

<footer id="footer-container">
            <section id="footer1">
                <div id="col">             
                    <h1>NEWSLETTER</h1>
                    <p>Register in our Newsletter.</p>

                    <form action="" name="newsletter" method="post" enctype="multipart/form-data">
                        <div id="email-label2">
                            <i class="fa fa-envelope-o"></i>
                            <input type="text"id="email2" name="email" placeholder="e-mail"  required />
                        </div>

                        <div id="submit">
                            <input type="hidden" name="news_register" value="register" />
                            <input type="submit" name="register" value="Register" />
                        </div>
                        <div class="clear"></div>     
                     </form>
                </div>
           </section>
</footer>

.clear {
  clear: both;
}

#footer-container
{
    width:100%; 
    float:left; 
    background:brown; 
    height:auto;    
}

#footer1
{
    width:320px;
    margin:15px 10px 15px 10px;
    height:auto;    

}

#col
{
    float:left;
     margin-right:53px;

}

#col h1
{
    border-bottom:1px dashed #ccc;
    font-family:'bariol_boldbold';
    color:#fff; 
    width:300px;
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 
}


#col p
{
    width:300px;
    color:#fff;
    text-align:justify;
    color:#ccc; 
    font-size:14px; 
    font-family:'bariol_regularregular'; 
    margin-bottom:10px;
}  



input[type="text"] 
{
    font-size: 14px;
    line-height: 20px;
    padding: 4px 3px;

}

#email2 
{
    padding-left: 20px;
    text-indent:5px;
    width:172px;
    height:18px;
     -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family:'Tahoma';
    font-size:14px;
    color:#000;
    float: left;
}

#submit {
    float: left;
    margin: 5px 0px 0px 5px;
}

input[type="submit"]
{
    text-align: left;
    font-family: 'Tahoma';
    font-size: 14px;
    color: #333;
    outline:none;
    background: blue; 
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline:none;
    cursor: pointer;
    color:#fff;
    width: 70px;
    height: 26px;
    text-align:center;
    border:1px solid #3c3412; 
    margin-bottom:15px;

}

Answer 2

忽略浮动，您的布局如下所示：

/----------------Container------------------\
| [Text input here]                         |
| [Submit button here]                      |
\-------------------------------------------/

现在让我们考虑float:right：

/----------------Container------------------\
| [Text input here]                         |
|                      [Submit button here] |
\-------------------------------------------/

看看即使有房间，它也不会神奇地向上移动。

现在，让我们尝试将提交按钮移动到之前布局中的文本输入：

/----------------Container------------------\
| [Submit button here]                      |
| [Text input here]                         |
\-------------------------------------------/

浮点数的结果：

/----------------Container------------------\
| [Text input here]    [Submit button here] |
\-------------------------------------------/

耶！但是......在之前使用提交按钮根本不是语义。还有什么可以做的？

好吧，您可以尝试删除<br />代码。

根据需要调整边距！

将我的按钮向右浮动不起作用

2 个答案: