Can not display the list and h1 tag on the same line
<!DOCTYPE html>
<html dir="ltr" lang="en-UK">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fahad | Just another web designer</title>
<!--Styling Starts-->
</script>
<style type="text/css">
开发者_如何学Go <link href='http://fonts.googleapis.com/css?family=Chewy&v1' rel='stylesheet' type='text/css'>
h1 { font-family: 'Chewy', arial, serif;
}
h1 {
font-size:45px;
padding-top:70px;
padding-left:350px;
}
.menu
{
padding:0;
margin-left:0;
height:200px;
width:300px;
}
.menu ul
{
padding-left:200px;
padding-top:45px;
font:Verdana, Geneva, sans-serif;
list-style-type:none;
text-decoration:none;
color:#666;
}
.container
{
color:#666;
}
a:link
{
color:#666;
}
a:hover
{
color:#333;
}
a:active
{
color:#666;
}
</style>
</head>
<body>
<div class="container">
<h1>Fahad</h1>
<div class="menu">
<ul>
<li><a>Home</a> </li>
<li><a>Blog</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div><!--logo div ends-->
</div><!--Container Div ends-->
</body>
</html>
Please help me out. Thank you.
To make two (or more) sibling elements appear in one line, you can use the inline-block value. Just apply display:inline-block to those elements.
Live demo: http://jsfiddle.net/DcS4u/
H1 and LI by default are block elements. If you want to have them live on the same line as another element you have to change it to inline.
H1, LI
{
display: inline;
}
However, that may cause you more harm than good.
You should look into floating block elements on the same line.
Updated:
Similarly, you can get 3 containers to float:
<div class="floater-parent clearfix">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.floater-parent DIV
{
width: 150px;
float: left;
}
Try adding a float: left to the h1.
You need to first float both the h1 and the menu left
h1, .menu {float:left;}
and then to make sure the any content which comes after the menu doesn't display on the same line, you need to clear on the very next sibling element.
example: #pageContent {clear:both;} // technically this could be clear:left.
<body>
<h1>My Page</h1>
<div class="menu">link1, link2</div>
<div id="pageContent">
Contents of my page
</div>
</body>
加载中,请稍侯......
精彩评论