我面临列内对齐的问题。我不确定我出了什么问题。不同的浏览器显示不同的结果。 Chrome 和 IE 的 react 相似。 Safari 和 Firefox 也是如此。我正在设计一个弹出窗口。在弹出窗口中有三个主要的 DIV。页眉、正文和页脚。正文具有三个 DIV 作为三列。除了正文中的中间列外,其他所有内容都完美对齐。弹出宽度为 810px。中间一列是它的 32%。我面临的问题。
- 中间栏的第一个框是电子邮件地址框,出于某种原因,宽度在 chrome 和 IE 中要小得多。
- 第二个框是红色的 Sumbit 框 - 与列中其他任何内容的电子邮件地址框不对齐
- 第三个是文本 - 我们永远不会分享您的电子邮件地址 - BR - 我们为什么要问 - 隐私政策。出于某种原因,当我使用 BR 分隔这两行时,第二行“Why we ask - Privacy Policy”与中心对齐。我想让它左对齐。
- 最后一个框 - 已经是成员(member)?登录 - 此处的框未正确左对齐。
列中的所有内容都没有左对齐。我无法为 margin-left 分配任何内容,因为它会丢弃我的第三列图像。我附上了中间栏的 HTML 和 CSS。谢谢
input [type=text] {
padding:1px;
border:1px;
-webkit-border-radius: 13px;
width:236px;
font-size:11px;
font-family: Lucida Grande;
font-weight: regular;
margin-left: 2px;
margin-top:10px;
}
input[type=submit] {
background: #9B1C1F;
font-family: Lucida Grande;
color: #ffffff;
font-weight: bold;
font-size:14px;
text-align:left;
width: 241px;
margin-top:10px;
padding:5px 15px;
border:0 none;
cursor:pointer;
-webkit-border-radius: 2px;
}
#already {
float:left;
padding: 5px 5px 5px;
width:236px;
background: #A2CD39;
font-family: Lucida Grande;
font-size:18px;
margin-left:0px;
margin-top:30px;
color: #ffffff;
display: inline-block;
}
#whyweask {
float: left;
font-size:12px;
margin-left:0px;
margin-top:7px;
}
#middlecolumn {
float: left;
width:32%;
margin-top:36px;
}
<div>
<div id="middlecolumn">
<form name="MailingList" method="post" action="Config_FullStoreURLMailingList_subscribe.asp">
<span style="margin-left:1px;">
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="30px">
<br>
<onclick="javascript:location.href='www.thankyou.html'">
<input type="submit" value="SUBMIT">
</form>
<div id="whyweask">We will never share your email address.</br>
Why we ask - <u><a href="www.privacypolicy.com">Privacy Policy</u></a>
</div>
<div>
<span id="already">
Already Member?
<b><u><a href="login.html"> Login </a></u></b> </span>
</div>
</div>
</div>
最佳答案
- 您的
input [type=text]
中有一个空格,将其删除以使其成为input[type=text]
。 - 所有元素(
input[type=text]
、input[type=submit]
、#already
)都定义了宽度(width:236px;
,width:241px;
,width:236px;
)。您需要将它们更改为相同的宽度,或者最好是width: 100%;
以适合您的#middlecolumn
元素容器。 - 您在
#whyweask
元素中的文本没有定义宽度。继续并向其中添加width: 100%;
。 - 现在一切都应该适合您的
#middlecolumn
元素并且完全对齐。
专业提示:您始终可以在容器周围放置边框(在本例中为 #middlecolumn
),例如 #middlecolumn { border: 1px solid red ; }
这样你就可以直观地看到你的元素是如何适合内部调试的。我通常会在我的网络检查器工具中执行此操作以快速测试,而无需将其保存到我的 CSS 中。
关于html - 弹出窗口中列内的对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25900942/