保证金底部正好与浮动左侧一起工作 [英] Margin-bottom just working with float-left

问题描述

在我的标记中，我期望页脚有25个像素的底部边距。我做到了这一点：

  div.footer {
 margin-bottom：25px; 
} 
  

没有成功 - 没有底部余量。如果我这样做：

  div.footer {
 margin-bottom：25px; 
 float：left; 
 
 $ / code> 

它可行！

<我知道！我可以用浮动来解决问题，但这是一个很好的做法吗？有没有其他的办法？

预先感谢。

==更新！ /我的一小段代码==

CSS：

  div.rlside-margin {
 margin：0 25px; 
} 
 
 div.tpside-margin {
 margin：25px 0; 
} 
 
 div.allside-margin {
 margin：25px; 
} 
 
 div.max-width {
 width：60em; 
 margin：0 auto; 
} 
 
 div.header {
 background-color：#efefef; 
宽度：100％; 
 height：90px; 
} 
 
 div.post-header {
 background-image：url（/ Images / PostHeader_Background.jpg）; 
 width：960px; 
 height：50px; 
} 
 
 div.content {
 position：relative; 
} 
 
 div.footer {
 margin-bottom：25px; 
} 
  

HTML：

 < div class =header> 
< div class =max-width> 
< a href =@ Url.Action（Index，Home）class =logo float-left>< / a> 
< ul class =navigation float-right> 
< li>< a href =@ Url.Action（Index，Home） =Home>主页< / a>< / li> 
< li>< a href =@ Url.Action（Index，Sobre）> Sobre< / a>< / li> 
< li>< a href =@ Url.Action（Index，Contato）> Fale conosco< / a>< / li> 
< / ul> 
< / div> 
< / div> 
 
< div class =max-width> 
< div class =post-header> 
< ul class =options float-left> 
< li>< a href =＃>< span> Ofertas< / span>< / a>< / li> 
< li>< a href =＃>< span> Lista de compras（0）< / span>< / a>< / li> 
< / ul> 
 
< div class =search-bar float-right> 
< form> 
< input class =float-lefttype =textplaceholder =Por qual produtovocêprocura？Digite aqui/> 
< button class =magnifier>< / button> 
< / form> 
< / div> 
< / div> 
< / div> 
 
< div class =content> 
 @RenderBody（）
< / div> 
 
< div class =max-width> 
< div class =footer> 
< div class =tbside-margin> 
< hr /> 
< ul class =bottom-navigation> 
< li>< a href =@ Url.Action（Index，Home） =Home>主页< / a>< / li> 
< li>< a href =@ Url.Action（Index，Sobre）> Sobre< / a>< / li> 
< li>< a href =@ Url.Action（Index，Contato）> Fale conosco< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
  

解决方案

我已经解决了！

在我的页脚导航中，我有以下标记：

 < ul class =底部导航> 
< li>< a href =@ Url.Action（Index，Home） =Home>主页< / a>< / li> 
< li>< a href =@ Url.Action（Index，Sobre）> Sobre< / a>< / li> 
< li>< a href =@ Url.Action（Index，Contato）> Fale conosco< / a>< / li> 
< / ul> 
  

和我的CSS：

  div.footer ul.bottom-navigation li {
 float：left; 
} 
  

问题是：我无法将菜单项浮动到左侧。为什么？我不知道，但我这样做是为了解决：

  div.footer ul.bottom-navigation li {
显示：内联; 
} 
  

它有效 - 但我不知道为什么。解释将是非常受欢迎的。

谢谢！

On my markup I expect the footer with 25 pixels of bottom margin. I did this:

div.footer {
   margin-bottom: 25px;
}

Without success — there is no bottom margin. If I do this:

div.footer {
   margin-bottom: 25px;
   float: left;
}

It works!

I know! I can solve the problem with floating, but it is a good practice? There is no other way?

Thanks in advance.

== UPDATE! / A little piece of my code ==

CSS:

div.rlside-margin {
    margin: 0 25px;
}

div.tpside-margin {
    margin: 25px 0;
}

div.allside-margin {
    margin: 25px;
}

div.max-width {
   width: 60em;
   margin: 0 auto;
}

div.header {
   background-color: #efefef;
   width: 100%;
   height: 90px;
}

div.post-header {
   background-image: url("/Images/PostHeader_Background.jpg");
   width: 960px;
   height: 50px;
}

div.content {
   position: relative;
}

div.footer {
   margin-bottom: 25px;
}

HTML:

<div class="header">
    <div class="max-width">
       <a href="@Url.Action("Index", "Home")" class="logo float-left"></a>
       <ul class="navigation float-right">
          <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
          <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
          <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
       </ul>
    </div>
</div>

<div class="max-width">
    <div class="post-header">
        <ul class="options float-left">
            <li><a href="#"><span>Ofertas</span></a></li>
            <li><a href="#"><span>Lista de compras (0)</span></a></li>
        </ul>

        <div class="search-bar float-right">
            <form>
                <input class="float-left" type="text" placeholder="Por qual produto você procura? Digite aqui" />
                <button class="magnifier"></button>
            </form>
        </div>
    </div>
</div>

<div class="content">
    @RenderBody()
</div>

<div class="max-width">
    <div class="footer">
        <div class="tbside-margin">
            <hr />
            <ul class="bottom-navigation">
                <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
                <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
                <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
            </ul>
        </div>
    </div>
</div>

解决方案

I've solved!

At my footer's navigation, I have the follow markup:

<ul class="bottom-navigation">
    <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
    <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
    <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
</ul>

And my CSS:

div.footer ul.bottom-navigation li {
    float: left;
}

The question is: I can't float my menu items to the left. Why? I don't know, but I did this to resolve:

div.footer ul.bottom-navigation li {
    display: inline;
}

It works — but I don't know why. The explanation will be very welcome.

Thanks!

这篇关于保证金底部正好与浮动左侧一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！