CSS布局对齐问题
[英]CSS Layout alginment problems
问题描述
I am creating a webpage, but have some problems with the page layout, especially the alignment. 
我正在创建一个网页，但是页面布局，尤其是对齐方式存在一些问题。 The problems are: 问题是：
My login part cannot be fully shown in the header, and cannot be aligned well.
我的登录部分无法完全显示在标题中，并且无法很好地对齐。 I would like it to look like this website: http://www.seek.com.au 我希望它看起来像这个网站： http : //www.seek.com.au The page has a two-column layout, but right now they look ugly.
该页面具有两列布局，但是现在看起来很丑。 Is there a better way to style it? 有没有更好的样式设置方式？ For example these two columns centered in the page, and there are nice borders around them. 例如，这两列以页面为中心，并且周围有漂亮的边框。 How to add images to the background and the logo(in the header)?
如何在背景和徽标（标题）中添加图像？
I'd like to make the page layout better by modifying the CSS or HTML, I tried hours and hours but still didn't figure it out.Please give me some advice, thanks. 我想通过修改CSS或HTML来使页面布局更好，我尝试了数小时，但仍然没有弄清楚。请给我一些建议，谢谢。
Here is the HTML and CSS: 这是HTML和CSS：
<body>
<!-- begin #header -->
<div class="header">
<div class="hd-banner">
<h1>Marryland Learning Center</h1>
</div>
<div class="login">
<form id="loginForm" action="/" method="post">
<div class="hd-caption">
<ul class="hd-login">
<li>
<ul>
<li class="l-column">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email">
</li>
<li class="l-column">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password">
</li>
<li class="l-column">
<input type="submit" id="signIn" name="signIn" value="Sign in">
</li>
</ul>
</li>
<li>
<ul>
<li class="l-column">
<input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
<label>Remember me</label>
</li>
<li class="l-column">
<a href="">Trouble signing in?</a>
</li>
<li class="l-column">
<input type="submit" name="action" value="Register">
</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
<!-- end #header --></div>
<div class="nav">
<ul class="menu">
<li><a href="">Students</a></li>
<li><a href="">Teachers</a></li>
<li><a href="">Training</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<!-- end #nav --></div>
<div class="content">
<!-- begin #extra -->
<div class="sidebar">
<form name="search" action="/" method="post">
<fieldset><legend>Quick Search</legend>
<p><label>Key Words <input type="text" name="keywords" id="keywords" class="textinput"></label></p>
<p><label>Class <input type="text" name="class" id="country1" class="textinput"></label></p>
<p><input type="submit" name="search" id="search" value="Search"></p>
</fieldset>
</form>
<!-- end #extra --></div>
<div class="main">
<h2>Implementing Responsive Design</h2>
<p>New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced
with this volatile landscape we
can either struggle for control or we can embrace the inherent flexibility of the web.
Responsive design is not just another technique--it is the beginning of the maturation of a medium and a fundamental
shift in the way we think about the web.</p>
<!-- end #main --></div>
<!-- end #content --></div>
<div class="footer">
<ul class="footer-menu">
<li><a href="">Site Terms</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Disclaimer</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Discrimination</a></li>
</ul>
<p class="copyright">Copyright © </p>
<!-- end #footer --></div>
</body>
</html>
Here is CSS: 这是CSS：
body
{
margin: 0;
padding: 0;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%; /* em best practice, target size ÷ size of content = result */
background-color: rgba(255,255,255,1);
}
/** Header Div **/
/* style .header div: floating the 3-column elements to the left, and giving them width seperately*/
.header
{
margin: 0;
overflow: hidden;
}
.hd-banner
{
float: left;
width: 50%;
margin: 0;
background-color: #FFC;
}
.login
{
position: relative;
}
.hd-caption
{
position: absolute;
top: 30%;
right: 20px;
}
.hd-login
{
display: inline-block;
margin-top: 30px;
list-style: none;
}
ul
{
margin: 10px 0;
}
.hd-login li
{
height: 33px;
list-style: none;
}
.l-column
{
margin-left: 18px;
overflow: hidden;
float: left;
}
.state-inp-sign-in
{
-moz-outline: none;
outline: none;
width: 130px;
height: 28px;
line-height: 24px;
}
button, input, select, textarea
{
font-size: 100%;
margin: 0;
vertical-align: baseline;
}
/** Nav Div **/
ul.menu
{
list-style-type: none;
padding: 1em;
clear: both; /* starts the nav below the floated header */
overflow:hidden;
text-align:center;
background-color:#98bf21;
}
ul.menu li
{
display:inline-block;
}
ul.menu li a:link, a:visited
{
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
ul.menu li a:hover, a:active
{
background-color:#7A991A;
}
/** Content Div **/
.content
{
clear: both; /* clear #nav ul li's following elements */
width: 100%; /* set the width of #content to 100% */
overflow: hidden; /* make it stretch to contain the floated elements */
margin-top: 3em;
}
.sidebar
{
float: left;
width: 30%;
margin-right: 5%;
}
.main
{
float: left;
width: 65%;
overflow: hidden; /* make it stretch to contain the floated elements */
}
/** Footer Div **/
.footer
{
clear: left; /* starts the footer below the floated content */
overflow: hidden; /* make it stretch to contain the floated elements */
width: 100%; /* fix float containment fail */
margin-top: 1em;
}
ul.footer-menu
{
list-style-type: none;
padding: 0;
clear: both; /* starts the nav below the floated header */
overflow:hidden;
text-align:center;
background-color:#999;
}
ul.footer-menu li
{
display:inline-block;
}
ul.footer-menu li a:link, a:visited
{
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
/* text-transform:uppercase;*/
}
ul.footer-menu li a:hover, a:active
{
background-color:#7A991A;
}
.copyright
{
text-align: center;
}
/** forms styling **/
.sidebar form
{
width: 15em;
border: 1px solid #666;
border-radius: 10px;
box-shadow: .2em .2em .5em #999;
background-color: #d0e9f6;
padding:1em;
}
.sidebar legend
{
text-align: left;
font-weight: bold;
font-size: 1.2em;
}
label {
display: block;
width: 8em;
text-align: left;
color: #04699d;
}
input[type="submit"]
{
display: block;
width: 7em;
height: 1.8em;
background: white;
font-size: inherit;
border: 1px solid #04699d;
border-radius: 4px;
box-shadow: 2px 2px 3px rgba(0,0,0,.5);
text-align: center;
}
.main form {
width: 30em;
border: 1px solid #666;
border-radius: 10px;
box-shadow: .2em .2em .5em #999;
background-color: #d0e9f6;
padding:1em;
}
I made a jsfiddle also: http://jsfiddle.net/JA3x9/ 我还做了一个jsfiddle： http : //jsfiddle.net/JA3x9/
Can anyone help? 有人可以帮忙吗？
2 个解决方案
解决方案1
0 已采纳 2013-11-12 04:42:34
This is a lot of change, but assuming you can make your elements in the header (and other places) <div> s instead of lists ( <ul> , <li> , etc), give this a try: 这是很多更改，但是假设您可以在标头（和其他位置）中将元素放在<div>而不是列表中（ <ul> ， <li>等），请尝试一下：
CSS: CSS：
body {
background-color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.header {
margin: 0;
min-height: 70px;
overflow: hidden;
}
.hd-banner {
background-color: #FFFFCC;
height: 95px;
left: 0;
margin: 0;
max-width: 50%;
position: absolute;
text-align: center;
top: 0;
width: 1000px;
}
.login {
left: 50%;
margin: 0;
max-width: 50%;
position: relative;
top: 10px;
}
.hd-caption {
clear: both;
height: 35px;
}
.hd-login-top, .hd-login-bottom {
display: inline;
text-align: center;
}
.t1, .t2, .t3, .b1, .b2, .b3 {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 32%;
width: 400px;
}
.state-inp-sign-in {
height: 28px;
line-height: 24px;
outline: medium none;
width: 130px;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
}
ul.menu {
background-color: #98BF21;
clear: both;
list-style-type: none;
overflow: hidden;
padding: 1em;
text-align: center;
}
ul.menu li {
display: inline-block;
}
ul.menu li a:link, a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
ul.menu li a:hover, a:active {
background-color: #7A991A;
}
.content {
clear: both;
margin-top: 3em;
overflow: hidden;
width: 100%;
}
.sidebar {
float: left;
margin-right: 5%;
width: 30%;
}
.main {
float: left;
overflow: hidden;
width: 65%;
}
.footer {
clear: left;
margin-top: 1em;
overflow: hidden;
width: 100%;
}
ul.footer-menu {
background-color: #999999;
clear: both;
list-style-type: none;
overflow: hidden;
padding: 0;
text-align: center;
}
ul.footer-menu li {
display: inline-block;
}
ul.footer-menu li a:link, a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 4px;
text-align: center;
text-decoration: none;
width: 120px;
}
ul.footer-menu li a:hover, a:active {
background-color: #7A991A;
}
.copyright {
text-align: center;
}
.sidebar form {
background-color: #D0E9F6;
border: 1px solid #666666;
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.5em #999999;
padding: 1em;
width: 15em;
}
.sidebar legend {
font-size: 1.2em;
font-weight: bold;
text-align: left;
}
label {
color: #04699D;
text-align: left;
width: 8em;
}
input[type="submit"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #04699D;
border-radius: 4px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
font-size: inherit;
height: 1.8em;
width: 7em;
}
.main form {
background-color: #D0E9F6;
border: 1px solid #666666;
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.5em #999999;
padding: 1em;
width: 30em;
}
.hd-login-bottom a {
color: #04699D;
text-decoration: none;
}
HTML: HTML：
<body>
<!-- begin #header -->
<div class="header">
<div class="hd-banner">
<h1>Marryland Learning Center</h1>
</div>
<div class="login">
<form id="loginForm" action="/" method="post">
<div class="hd-caption">
<div class="hd-login-top t1">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email" />
</div>
<div class="hd-login-top t2">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password" />
</div>
<div class="hd-login-top t3">
<input type="submit" id="signIn" name="signIn" value="Sign in" />
</div>
</div>
<div class="hd-caption-2">
<div class="hd-login-bottom b1">
<label for="RememberMe"><input name="RememberMe" type="checkbox" value="true"> <input name="RememberMe" type="hidden" value="false" /> Remember me</label>
</div>
<div class="hd-login-bottom b2">
<a href="">Trouble signing in?</a>
</div>
<div class="hd-login-bottom b3">
<input type="submit" name="action" value="Register" />
</div>
</div>
</form>
</div>
</div>
<!-- end #header -->
<div class="nav">
<ul class="menu">
<li><a href="">Students</a></li>
<li><a href="">Teachers</a></li>
<li><a href="">Training</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<!-- end #nav --></div>
<div class="content">
<!-- begin #extra -->
<div class="sidebar">
<form name="search" action="/" method="post">
<fieldset><legend>Quick Search</legend>
<p><label>Key Words <input type="text" name="keywords" id="keywords" class="textinput"></label></p>
<p><label>Class <input type="text" name="class" id="country1" class="textinput"></label></p>
<p><input type="submit" name="search" id="search" value="Search"></p>
</fieldset>
</form>
<!-- end #extra --></div>
<div class="main">
<h2>Implementing Responsive Design</h2>
<p>New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced
with this volatile landscape we
can either struggle for control or we can embrace the inherent flexibility of the web.
Responsive design is not just another technique--it is the beginning of the maturation of a medium and a fundamental
shift in the way we think about the web.</p>
<!-- end #main --></div>
<!-- end #content --></div>
<div class="footer">
<ul class="footer-menu">
<li><a href="">Site Terms</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Disclaimer</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Discrimination</a></li>
</ul>
<p class="copyright">Copyright © </p>
<!-- end #footer --></div>
</body>
解决方案2
0 2013-11-12 04:56:02
Alter your style sheet as follows: 更改样式表，如下所示：
1) and 3) 1）和3）
.header {
margin: 0;
overflow: hidden;
display: table;
padding: 20px;
background-color: #fFc;
width: 100%;
}
.hd-banner {
margin: 0;
display: table-cell;
background: url(logo.png) 0 0 no-repeat;
}
h1 {
font-size:1.5em;
}
.login {
display: table-cell;
}
li.l-row {
display:table;
}
ul.full-width {
width:100%;
}
.l-column {
padding: 2px 2px;
overflow: hidden;
display:table-cell;
}
.hd-caption {
top: 30%;
right: 20px;
}
2) 2）
.content {
clear: both;
width: 100%;
overflow: hidden;
margin-top: 3em;
display: table;
}
.sidebar {
width: 30%;
display: table-cell;
padding: 20px;
}
.main {
display: table-cell;
padding: 20px;
}
3) already covered in first part by 3）已经在第一部分中被
background: url(logo.png) 0 0 no-repeat;
you need to add the l-row and full width classes your your form as follows 您需要按如下方式添加L行和全宽类
<ul class="hd-login">
<li class="l-row">
<ul class="full-width">
<li class="l-column">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email">
</li>
<li class="l-column">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password">
</li>
<li class="l-column">
<input type="submit" id="signIn" name="signIn" value="Sign in">
</li>
</ul>
</li>
<li class="l-row">
<ul class="full-width">
<li class="l-column">
<input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
<label>Remember me</label>
</li>
<li class="l-column">
<a href="">Trouble signing in?</a>
</li>
<li class="l-column">
<input type="submit" name="action" value="Register">
</li>
</ul>
</li>
</ul>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS位置的布局问题 - layout problems with CSS position
CSS布局问题 - CSS layout problems
布局css和javascript的问题 - Problems with layout css and javascript
CSS网格布局问题 - CSS grid layout problems
CSS的布局问题 - Layout problems with CSS
CSS布局问题 - CSS Layout Problems
CSS布局问题，流程图设计 - CSS Layout Problems, FlowChart Design
css新闻文章排版问题 - css news article layout problems
CSS和div标签布局问题 - css and div tag layout problems
CSS：特殊流体布局问题 - CSS: Special Fluid Layout Problems
相关标签