0

我有一个大 div，它位于我想要在我的计算机上的中心位置。没有居中的任何其他计算机。我说的是“midwrap”，这是我拥有的大黑盒子。我希望它位于侧链接和包装器的侧面之间，这是它所在的灰色框。

designatease.com

先感谢您。

HTML

<div id="wrapper">
<div id="midwrap"></div>
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="news.html">News</a></li>
<li><a href="learn.html">Learn</a></li>
<li><a href="sites.html">Useful Sites</a></li>
</ul>
</div>
</body>

CSS

#wrapper{
position:relative;
top:-82px;
margin-right:4%;
margin-left:4%;
width:92%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
overflow:hidden;
}

#sidelinksleft {
    margin-left:auto;
    margin-right:auto;
    float:left;
    height:25px;
    position:relative;
    /*removed clear from here*/
    float:left;
    margin-left:-25px;
    top:16px;
}

#sidelinksleft li{
position:relative;
padding-top:3px;
list-style-type: none;
}

#sidelinksleft li a{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinksleft li a:hover{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B0E2FF;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinksleft li a:active{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

.Resources{
color:#000000;;
font-size:16px;
font-family: sans-serif;
position:relative;
margin-left:-156px;
top:10px;
}

#midwrap {
    width:74%;
    height:95%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background:black;
    top:2%;
    position:relative;
    float:right; /*float right*/
    margin-right:5.5%;
}
4

1 回答 1

0

也许您应该在设置样式之前重做一个简单的模板。

对他们的行为使用 CSS 规则可能会有所帮助：

  1. width和min-width和max-width。
  2. float和相邻元素的布局
  3. text-align并display:inline-block导致它看到浮动元素并且overflow:hidden;在那里不可用。

margintop 不应该在 % 中使用，因为它反映了父宽度的 %，而不是高度嘿！这是一个意想不到的行为，不是吗？ （如果父母在 CSS 中有宽度，则垂直填充百分比也是如此）

我们可以得到这样的东西：http ://codepen.io/anon/pen/AHhpG 

html,body {
  height:100%;
  margin:0;
  text-align:center;
}
div, nav ,a {
  border:1px solid;
}
#main {
  width:90%;
  margin:1% auto 0;
  height:90%;
  min-width:800px;
}
nav {
  float:left;
  margin:1em;
  max-width:20%;  
  width:200px;
}
nav a {
  display:block;
}
#box {
     display:inline-block;
  width:70%;
  height:90%;
  margin:1em 1em 0;
}
于 2013-06-28T14:06:11.130 回答