我在Firefox中创建了几个页面,一切都看起来应该如此。快速翻转Chrome和Safari,注意到我在此页面标题中的选择加入表单未按预期显示。我希望整个opt-in div都在标题div中。据我所知,它位于Firefox的标题div中,但几乎所有其他浏览器都显示在主导航下方。
以下是标题的CSS和应该包含的选择加入形式:
.header{height: 302px;min-width: 100%; background-color: #265f8b;
margin: 0 auto;}
.opt-in {height: 280px; width: 800px;background-color: #c7e877;float: right;
margin-right: 200px;margin-top: 10px;border:5px solid #8db530;
border-radius: 10px;position: relative;}
这是HTML:
<div class='header'>
<img style='border: 1px solid black;' src='images/main-logo.jpg'></img>
<div class='opt-in'>
<p>Enter your name and email below to get
<span style='font-weight: bolder;'>Free Instant Access</span> to the most comprehensive
guide available on how to ..</p>
<p><span style='font-weight: bolder;'>Over 10,000 people</span> have enjoyed my eBook and receive
a weekly newsletter with exclusive tips!</p>
<table>
<form method='post' action='opt-in-form.php'>
<tr><td><input type='text' name='name' value='Enter Name...' /></td></tr>
<tr><td><input type='text' name='email' value='Enter Your Email...' /></td></tr>
<input class='opt-in-button' type='image' src='images/opt-in-button.png' alt='Submit Form' />
</table>
</form>
<img class='book-cover' src="images/book-cover-new.png"></img>
</div>
</div>
您会注意到我已将其包含在标题div中并且右侧有一个浮点数。
答案 0 :(得分:3)
左上角徽标需要float: left
。应该解决这个问题。
答案 1 :(得分:3)
将徽标img留下。
float:left
也指定img元素的宽度。 width:auto
也会这样做。