相关疑难解决方法(0)

CSS:父母没有边界的边缘

正如你在这张照片中看到的那样,我在div绿色内部有一个div没有顶部边框的橙色.橙色div有一个30px上边距,但它也推动了绿色div.当然,添加顶部边框将解决问题,但我需要绿色div顶部无边框.我能做什么?

.body {
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
	width: 120px;
	height: 112px;
	background-color: lightgreen;
}

.body .container {
	background-color: orange;
	height: 50px;
	width: 50%;
	margin-top: 30px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="header">Top</div>
<div class="body">
	<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
Run Code Online (Sandbox Code Playgroud)

谢谢

css border margin collapse

52
推荐指数
2
解决办法
3万
查看次数

为什么设置此子元素的上边距会将其父容器向下推?

我有两个div:

<div id="headercontainer" data-type="background" data-speed="5"> 
    <div id="headersubcontainer">
        <h1>Simple and Cost Effective Web Solutions</h1>  
    </div> 
</div>

<div id="teamcontainer" data-type="background" data-speed="5"> 
    <div id="teamsubcontainer"> 
        <h1>Developed by a dedicated team</h1> 
    </div> 
</div> 
Run Code Online (Sandbox Code Playgroud)

两者都有100%的宽度和800px的高度.第一个标题是我设置了一个上限:160px.如图所示,它不会将标题向下移动到其父div中,而是将父div移动到其中,如下所示:

网页

这是我的相关CSS:

h1{
    font-size: 48px;
    font-family: $header-font-stack; 
    font-weight: 100;
    width: 400px;
}

#headercontainer{
    width: 100%; 
    height: 800px;
    background-image: image-url("background.jpg");
    background-position: center top;
    background-repeat: no-repeat;
}

#headercontainer h1{
    text-align: center;
    margin: 0px auto;
    margin-top: 160px;
    color: #610B21;
}
Run Code Online (Sandbox Code Playgroud)

使用填充显然工作,但我想更合适并使用边距.如何设置上边距并将标题下移到容器中而不用移动容器?

html css

6
推荐指数
1
解决办法
9472
查看次数

意外的<body>身体行为,因为它被孩子的边缘顶部推下

HTML问题看起来总是那么简单,我几乎感到尴尬地问他们.但是,就是这样,我不知道为什么会这样.

在这个小提琴http://jsfiddle.net/o5ee1oag/2/正在被标题的边距(50px)推下来:

<body>
 <div id="background"></div>
 <header>
  <ul>
   <li>Button 1</li>
   <li>Button 2</li>
  </ul>
 </header>
</body>
Run Code Online (Sandbox Code Playgroud)

因此div#background {position:absolute; 被推倒了.然后我去Firebug,应用背景:红色; 身体和整个区域变红,包括边缘.

1)为什么会发生这种情况,身体距离顶部是50px?

2)如何防止身体被压下?

谢谢 :).

html css margin

2
推荐指数
1
解决办法
1309
查看次数

LI margin不影响UL元素

如果我将margin-top放到第一个列表项(LI),那么margin在ul之外.

最后一项和margin-bottom也是一样的.但保证金左/保证金权利按预期运作.

为什么这样,是否可以修复?

请参阅:小提琴链接

干杯

html css list margin

1
推荐指数
1
解决办法
744
查看次数

内部div的CSS margin-top推动父div下降

我试图将父div中的子div降低5px.当我把margin-top:5px; 在内部div上,它从父div上方的div下推内部div和父div,但不会将内部div从父div推下.如何设置它以便只将内部div从父div推下5px?我不希望父div从它上面的div下推.谢谢你的帮助.

用于导航的HTML:

<nav>
    <div class="nav-container">
      <div id="cat_14623_divs">
          <ul id="nav_14623">
              <li><a href="#" onclick="return false;">AKINA &amp; RED LAKE</a</li>       
              <li><a href="#" onclick="return false;">FRESH WILD CAUGHT FISH</a>
                   <ul id="navsub_14623_2326">
                       <li><a href="#" onclick="return false;">WALLEYE</a></li>
                       <li><a href="#" onclick="return false;">PERCH</a></li>
                       <li><a href="#" onclick="return false;">CRAPPIE</a></li>
                       <li><a href="#" onclick="return false;">NORTHERN</a></li>
                       <li><a href="#" onclick="return false;">WHITEFISH</a></li>
                  </ul></li>
              <li><a href="#" onclick="return false;">NEWS FROM THE FISHERY</a></li>
              <li><a href="#" onclick="return false;">CONTACT US</a></li>
              <li class="last"><a href="#" onclick="return false;">FAQs</a></li>
         </ul>
      </div>
    </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

导航CSS:

nav{
position:relative;
width:960px;
background-color:#660000;
height:40px;
}

div.nav-container{
position:relative;
width:100%; 
} …
Run Code Online (Sandbox Code Playgroud)

html css

1
推荐指数
1
解决办法
9700
查看次数

标签 统计

css ×5

html ×4

margin ×3

border ×1

collapse ×1

list ×1