0

一部のコンテンツをページの中央に配置する際に問題が発生しました...要点は、それを達成できた..しかし、ブラウザのサイズを変更すると、左側のコンテンツが表示されない..私はどこが間違っているのかわかりません..コードは次のとおりです...

HTML コード ....

<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<link href="home.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="container">
<img class="logo" src="logo.jpg" width="160px" height="83px">

<div id="menualign">
 <ul>
    <li class="topli"><a href="">Home</a></li>
    <li class="topli"><a href="" target="_blank">site 1</a></li>
    <li class="topli"><a href="" target="_blank">Site 2</a></li>
    <li class="topli"><a href="">Logout</a></li>
 </ul>

</div>
<img src="bgn.jpg" width="900" height="7" id="bar">

</div>
</body>

</html>

CSSコードは以下の通り

#container
{

 width:920px;
 height:600px;    
 position:absolute;
 left: 50%;
 top: 50%;
 margin-left: -460px;
 margin-top: -300px;
}

#menualign
{
position:relative;
left:24%;
}

#menualign ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menualign ul li { display: inline; }

#menualign ul li a
{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
padding: .2em 1.41em;
color: #0056A2;
background-color: #fed352;
}

img.logo
{
position:relative;
top:20px;
}

#menualign ul li a:hover
{
color:black;
font-size:17px;
}
4

1 に答える 1

1

コンテナを配置してから、画像とメニューmargin:0 auto;に渡す必要があります。最後に、画像の高さのメニューを指定して、垂直方向に整列させます。float:leftfloat:rightline-height

#container
{
 width:920px; 
 margin:0 auto;
}
#menualign ul li {
 margin-top:10px;
 line-height:83px; 
  float:left;
}
img.logo
{
float:left;
margin-top:10px;
}

わかりました、私は小さな jsFiddle を作成しました。それが役立つことを願っています。jsフィドル

于 2013-02-20T09:29:04.570 に答える