Question

我已经制作了这个CSS布局，但是我无法正确地将菜单改为内容。

body{
    margin:0;
    background:url(wb_menu_bg.jpg) repeat-y;

}



#bg-left {
    color:#FFF;
    width:225px;
    position:absolute;
    margin:0;
 }

#content {
margin:0 0 0 230px;
}

 #menu8 {
    width: 200px;
    margin-top: 0px;
}

#menu8 li a {
   text-decoration: none;
   voice-family: "\"}\""; 
   voice-family: inherit;
}

 #menu8 li a:link, #menu8 li a:visited {
    color: #777;
    display: block;
    background: url(images/menu8.gif);
    padding: 8px 0 0 20px;
}

#menu8 li a:hover {
     color: #257EB7;
    background: url(images/menu8.gif) 0 -32px;
    padding: 8px 0 0 25px;
 }

#menu8 li a:active {
    color: #fff;
    background: url(images/menu8.gif) 0 -64px;
    padding: 8px 0 0 25px;
 }

#menu8 ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

 h2 {
   font-size:18px;
  }

#inlogform{
    width:50%;
    height:50%;
    position:absolute;
    left:50%;
    top:50%;
    margin:-170 0 0 -180px;
color:white;
 }

 #inlogform td
 {
    color:white;
 }

 #bg{

    width:100%;
    height:100%;
    background: url(boekenkast.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
  }

#inlogform a:link {color:#FFFFFF;}      /* unvisited link */
#inlogform a:visited {color:#FFFFFF;}  /* visited link */
#inlogform a:hover {color:#FFFFFF;}  /* mouse over link */
#inlogform a:active {color:#FFFFFF;}  /* selected link */

但是对齐不是我想要的。

现在的情况： http://i41.tinypic.com/ncmtsn.png

期望的情况 http://i39.tinypic.com/30ufzok.png

有人可以告诉我我做错了什么。

Answer 1

你应该在你的css文件中使用：

.BG-LEFT{
float:left;
}

了解有关float的更多信息： http://www.w3schools.com/css/css_float.asp

Answer 2

您需要对要彼此相邻的事物（float: left和.bg-left）实施#inlogform。或者左侧元素上有float: left，右侧元素上有float: right，因为父容器的宽度/宽度足以使它们彼此靠近。

Answer 3

您可以尝试添加

float:left;

到你的菜单

e.g。

#bg-left {
    color:#FFF;
    width:225px;
    float:left;
    margin:0;
 }

假设＃bg-left是您的菜单

否则您是否能够提供指向您的HTML或网站的链接？

对齐菜单和内容CSS

3 个答案: