为什么按钮元素旁边不显示输入表格？

我有一些基本的定位，我通常不会遇到麻烦。我只是希望订阅按钮的宽度应为20％，并且位于输入表单的左侧。为什么按钮元素旁边不显示输入表格？

显示为块，inline或inline-block的左花车什么都不做，这似乎是显而易见的解决方案。

我不知道为什么，但只要我添加的邮件黑猩猩码的输入形式保持不变，但在下面的下一行的按钮显示和宽度大于它。我已经设置了ID和类服从内部样式表，而不是邮件黑猩猩。

为什么这个元素不服从基本样式？或者我错过了一些基本的东西？

感谢任何帮助，谢谢。

#newsletter { 
 
    background: lightblue; 
 
    width: 56%; 
 
    height: 100%; 
 
    padding: 0 0 0 25px; 
 
    display: table-cell; 
 
} 
 

 
.f1 { 
 
    display: block; 
 
    text-transform: uppercase; 
 
    color: darkblue; 
 
    font-size: 20px; 
 
    line-height: 1; 
 
    padding-bottom: 15px; 
 
} 
 

 
.f2 {} 
 

 
#f-sm, 
 
#f-em { 
 
    padding-top: 15px; 
 
    display: block; 
 
} 
 

 
#f-em form input { 
 
    margin: 0; 
 
    width: 80%; 
 
    height: 30px; 
 
    background: pink; 
 
    float: left; 
 
} 
 

 
#newsletter-button { 
 
    width: 20%; 
 
    height: 30px; 
 
    float: left; 
 
    background: lightblue; 
 
}

<div id="newsletter"> 
 
    <span class="f1">Newsletter Signup</span> 
 
    <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare...</span> 
 
    <span id="f-em"> 
 
<form action="action_here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
 
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> 
 
<div id="mce-responses"> 
 
<div class="response" id="mce-error-response" style="display:none"></div> 
 
<div class="response" id="mce-success-response" style="display:none"></div> 
 
</div> 
 
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button"> 
 
</form> 
 
</span> 
 
    <div class="clear"></div> 
 
</div>

来源

2017-08-02 user3760941

您需要更多的特异性添加到您声明的自定义样式规则中，例如：'＃f-em form＃newsletter-button' – UncaughtTypeError

规则#f-em form input被施加到两个按钮和输入。给予80％的宽度。

无论你的按钮（<input type="submit" ...>）和你的文本字段（<input type="text">）符合您的规则#f-em形式输入其中有width:80%.

你的按钮，也符合你的#newsletter-button规则，但这是那么具体比上面的规则，就可以得到了重写。

来源

2017-08-02 08:18:02

这条规则#f-em form input在你的css中并没有特定的适用于所有的输入标签元素，还有形式和#f-em。你可以尝试使它更具体。

为按钮对准表格的左边，你可以试试下面的代码对齐。

form { 
    margin:0 auto; 
    width: 80%; 
    height: 30px; 
    background: pink; 
    overflow: hidden; 
    } 
    input{ 
    float:left; 
    width:20%; 
    }

来源

2017-08-02 08:32:30

为什么按钮元素旁边不显示输入表格？

回答

相关问题