使用CSS向页面移动div

时间：2016-08-16 22:11:17

标签： html css

我正在尝试将midblock标签向上移动一点点以便更接近

<ul class="toplist">
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></a></li>
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="salads"></a></li>
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="burgers-sandwiches"></a></li>
<li class="header"><a href="/menu/sides"><img src="https://i.imgur.com/T4ZAaK3.png" class ="sides"></a></li>
<li class="header"><a href="/menu/smoothies-shakes"><img src="https://i.imgur.com/T4ZAaK3.png" class ="smoothies-milkshakes"></a></li>
<li class="header"><a href="/menu/kids-real-meals"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></a></li>
</ul>

部分。当我改变midblock中的底部距离时，没有任何变化。有人可以帮我把它移动一点点靠近顶级菜单吗？我包括一个jsfiddle。 https://jsfiddle.net/xfmets37/我现在已经尝试了一段时间，但似乎无法让它发挥作用。我的调整似乎只是在jsfiddle中几乎没有关闭，所以如果你碰巧知道快速修复我喜欢听到它，但这不是问题。有人可以请我帮我垂直对齐吗？

4 个答案:

答案 0 :(得分：1)

只需将Macbook-Pro jeremy$ npm install ... *installed other packages normally* ... npm WARN optional Skipping failed optional dependency //msnodesqlv8: npm WARN notsup Not compatible with your operating system or architecture: msnodesqlv8@0.2.3 添加到position: relative;。

.midblock之类的定位只能应用于定位元素。查看MDN或w3schools上的位置。

答案 1 :(得分：1)

问题是UL标签从浏览器中添加了保证金。您需要将normalize.css添加到您的站点或ul，ol，dl {margin：0;填充：0}

答案 2 :(得分：1)

添加margin:0 0 20px 0;

＆＃13;
＆＃13; 
img.kale-grain-bowls, img.salads, img.burgers-sandwiches, img.sides,
img.smoothies-milkshakes, img.kids-real-meals{
	width: 100%;
	max-height: 100px;
}
.page{
	position: relative;
	height: 100%;
	width: 100%;
	text-align: center;
}
.video, .front-promo-1,
.front-promo-2, .events,
.family-foundation, .partners,
.fundraisers, .cousins, .geniuses,
.greats, .vision{
	margin: 2.5px;
	float: left;
	position: relative;
}
.video{
	height: 300px;
	background-image: url('https://i.imgur.com/n3z21Ms.png');
}
.front-promo-1{
	height: 147.5px;
	background-image: url('https://i.imgur.com/iag6xGh.png');
}
.front-promo-2{
	height: 147.5px;
	background-image: url('https://i.imgur.com/iag6xGh.png');
}
.bgood-footer{
	width:100%;
    margin: 0 auto;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

img.footer-img{
    max-width:50px;
}
img.mobile-app-img{
	max-width: 150px;
	height: 100%;
}
img.talk-to-us-img{
	max-width: 150px;
	height: 100%;
}
img.careers-img{
	max-width: 100px;
	height: 100%;
}
img.press-img{
	max-width: 100px;
	height: 100%;
}
img.ordering-loc-img{
	max-width: 240px;
	height: 100%;
}
ul.clearfix{
  list-style:none;
  margin:2px;
  padding:2px 2px;
  width:100%;
  float:left;
}
li.foot{
  float:left;
  height: 45px;
}
li.left {
  float:left;
}

li.mid{
  float:left;
  max-width: 10%;
}
li.right{
  float:left;
}
ul.toplist{
  list-style:none;
  padding:0px;
  margin:0 0 20px 0;
  width:100%;
  float:left;
}
li.header{
	float:left;
	height: 100%;
	width: 16%;
	margin: 0px 2.5px;
}
.midblock{
	max-width:100%;
	bottom: 20px;
}/*for mobile phones: */
	[class*="col-"]{
		width:100%;
	}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8%;}
    .col-m-2 {width: 16%;}
    .col-m-2-5 {width: 21.55%;}
    .col-m-3 {width: 28%;}
    .col-m-4 {width: 32.5%;}
    .col-m-5 {width: 40%;}
    .col-m-6 {width: 48%;}
    .col-m-7 {width: 56%;}
    .col-m-8 {width: 65.7%;}
    .col-m-9 {width: 72%;}
    .col-m-10 {width: 80%;}
    .col-m-11 {width: 88%;}
    .col-m-12 {width: 96%;}
    /*footer data: */
}
@media only screen and (min-width: 768px){
	/*for mobile desktop: */
	.col-1 {width: 8%;}
	.col-2-5 {width: 21.55%;}
    .col-2 {width: 16%;}
    .col-3 {width: 28%;}
    .col-4 {width: 32.5%;}
    .col-5 {width: 40%;}
    .col-6 {width: 48%;}
    .col-7 {width: 56%;}
    .col-8 {width: 65.7%;}
    .col-9 {width: 72%;}
    .col-10 {width: 80%;}
    .col-11 {width: 88%;}
    .col-12 {width: 96%;}
    /*footer data: */
}
＆＃13; 
<div class="page">
<ul class="toplist">
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></a></li>
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="salads"></a></li>
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="burgers-sandwiches"></a></li>
<li class="header"><a href="/menu/sides"><img src="https://i.imgur.com/T4ZAaK3.png" class ="sides"></a></li>
<li class="header"><a href="/menu/smoothies-shakes"><img src="https://i.imgur.com/T4ZAaK3.png" class ="smoothies-milkshakes"></a></li>
<li class="header"><a href="/menu/kids-real-meals"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></a></li>
</ul>
<div class ="midblock">
<div class="col-m-8 col-8 video">Video</div>
<a href="/promo/temp1"><div class="col-m-4 col-4  front-promo-1">Promo one</div></a>
<a href="/promo/temp2"><div class="col-m-4 col-4 front-promo-2">Promo two</div></a>
</div>
<div class="bgood-footer">
<ul class="clearfix">
	<li class="left foot"><a href="/mobile-app"><img src="https://i.imgur.com/C3CjRJS.png" class ="mobile-app-img"></a></li>
	<li class="left foot"><a href="/talk-to-us"><img src="https://i.imgur.com/CRvhpM9.png" class ="talk-to-us-img"></a></li>
	<li class="left foot"><a href="/careers"><img src="https://i.imgur.com/6J0kt1a.png" class ="careers-img"></a></li>
	<li class="left foot"><a href="press"><img src="https://i.imgur.com/NzpWMU3.png" class ="press-img"></a></li>
        <li class = "mid foot foot-m-0"></li>
        <!-- Facebook -->
	<li class="foot"><a href="https://www.facebook.com/bgood"><img src="https://i.imgur.com/CH1OTMP.png" class ="footer-img"></a></li>
        <!-- Youtube -->
	<li class="foot"><a href="https://www.youtube.com/user/unclefaris"><img src="https://i.imgur.com/S2BQXoT.png" class ="footer-img"></a></li>
        <!-- Twitter -->
	<li class="foot"><a href="https://twitter.com/b_good_"><img src="https://i.imgur.com/NgTYmsd.png" class ="footer-img"></a></li>
        <!-- Instagram -->
	<li class="foot"><a href="https://www.instagram.com/b.goodofficial/"><img src="https://i.imgur.com/RD3YjT6.png" class ="footer-img"></a></li>
        <!-- Location -->
	<li class="right foot"><a href=""><img src="https://i.imgur.com/MV5BJA3.png" class ="ordering-loc-img"></a></li>
</ul>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

或者你可以将它添加到你的css顶部，但它会使一切正常化

 *{
      padding:0;
      margin:0;
    }

答案 3 :(得分：0)

标签有边距，只需修改margin-bottom，而不是修改中间边距，或将边距更改为0，然后修改中间边距

相关问题
最新问题