为什么它显示不正确？ [英] Why it doesn't displayed right?
本文介绍了为什么它显示不正确？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好。
我正在用HTML / CSS设计一个页面，我遇到了一个问题。
这是HTML代码：
Hi everybody.
I was designing a page in HTML/CSS and i came up in a problem.
This is the HTML code:
<body>
<form id="form1" runat="server">
<div id="center">
<div id="header"></div>
<div id="header-menu">
<div id="main-menu">
<ul id="menu">
<li><a href="#">خانه</a></li>
<li><a href="#">محصولات</a>
<ul class="sub-menu">
<li><a href="#">محصولات 1</a></li>
<li><a href="#">محصولات 2</a></li>
</ul>
</li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</div>
</div>
<div id="right-side"></div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="left-side"></div>
<div id="footer"></div>
</div>
</form>
</body>
这里是CSS代码：
And here is the CSS code:
body
{
background: -webkit-linear-gradient(180deg,#000000,#011341); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg,#000000,#011341); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,#000000,#011341); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg,#000000,#011341); /* Standard syntax */
}
#center
{
width:1079px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
border-radius:10px;
background-color:Aqua;
}
#header
{
width:inherit;
height:200px;
background-color:Green;
border-radius:10px 10px 0px 0px;
}
/*----------------------- MENU ------------------*/
#header-menu
{
width:inherit;
height:50px;
background-color:Blue;
border-radius:0px 0px 5px 5px;
direction:rtl;
}
#main-menu
{
position:relative;
top:10px;
right:10px;
}
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 28px;
width: 100px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
#right-side
{
float:right;
width:18.1%;
height:300px;
border-radius:5px;
margin:10px 10px 0px 10px;
background-color:Orange;
}
#content
{
float:right;
width:60%;
height:auto;
border-radius:5px;
background-color:White;
margin-top:10px;
padding-bottom:10px;
}
#left-side
{
float:right;
width:18.1%;
height:300px;
border-radius:5px;
background-color:Lime;
margin-top:10px;
margin-right:10px;
}
#footer
{
float:right;
width:1079px;
height:300px;
border-radius:0px 0px 10px 10px;
background-color:Black;
margin:10px 0px 20px 0px;
}
那么id = center div标签有什么问题？
因为我无法在我的页面中看到中心的Aqua背景。
So what's the problem with the id = center div tag?
Because i cant see the Aqua Background of center in my page.
推荐答案
在#center中，添加一行：
in the #center, add one line:
display: inline-block;
如果你想把整个东西放在中心，可以在体型中添加它：
if you want to center the whole thing add this in the body style:
text-align: center;
这篇关于为什么它显示不正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
