浮动文本-当列表项超过时，则出现下行项。

Question

我有一个生日祝福吧在网站顶部。在div中有一个ul。当我在ul中添加更多的列表项时。然后是下坡的东西。请到屏幕截图去洗劫。

​

$.ajax({
  url: '@Url.Action("getTodaysBirthday", "Home")',
  dataType: 'json',
  data: {},
  success: function(data) {
    $("#ticker01").empty();
    $.each(data,
      function(index, optiondata) {
        $("#ticker01").append(optiondata.Txt);
      });
  }
});

.news_sticker li a {
  display: inline-block;
  color: #eee;
  margin-right: 40px
}

.news_sticker {
  float: right;
  width: 85%;
  padding: 5px 15px 5px 5px
}

.news_sticker li a:before {
  content: "";
  margin-right: 5px
}

.news_sticker li a:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="latest_newsarea">
  <span>Birthday Wishes...</span>
  <ul id="ticker01" class="news_sticker">
    <li><a href="#">Happy Birthday Simran !</a></li>
    <li><a href="#">Happy Birthday M Vinoj  !</a></li>
    <li><a href="#">Happy Birthday Shiv Kumar!</a></li>
    <li><a href="#">Happy Birthday Simran!</a></li>
    <li><a href="#">Happy Birthday Dharmendra!</a></li>
    <li><a href="#">Happy Birthday Lalchand!</a></li>
    <li><a href="#">Happy Birthday Lalchand!</a></li>
    <li><a href="#">Happy Birthday Lalchand !</a></li>
  </ul>
</div>

​

Answer 1

您的latest_newsarea div由于在其中浮动ul子程序而崩溃。

您需要清除这个折叠问题的浮点，解决这个问题。

这是你怎么做的。

   .latest_newsarea:after {
      content: "";
      display: table;
      clear: both;
    }

​

.news_sticker li a{display:inline-block; color:#eee; margin-right:40px}
.news_sticker{float:right; width:85%; padding:5px 15px 5px 5px}
.news_sticker li a:before{content:""; margin-right:5px}
.news_sticker li a:before{display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1}

.latest_newsarea:after {
  content: "";
  display: table;
  clear: both;
}

.latest_newsarea {
  background-color: yellow;  
}

<div class="latest_newsarea">
<span>Birthday Wishes...</span>
<ul id="ticker01" class="news_sticker" >
<li><a href="#">Happy Birthday Simran !</a></li>
<li><a href="#">Happy Birthday M Vinoj  !</a></li>
<li><a href="#">Happy Birthday Shiv Kumar!</a></li>
<li><a href="#">Happy Birthday Simran!</a></li>
<li><a href="#">Happy Birthday Dharmendra!</a></li>
<li><a href="#">Happy Birthday Lalchand!</a></li>
<li><a href="#">Happy Birthday Lalchand!</a></li>
<li><a href="#">Happy Birthday Lalchand !</a></li>
</ul>
</div> 

​

如果这能解决你父母崩溃的问题，请告诉我。

下面是与清除浮点数的一些方法的链接：https://css-tricks.com/snippets/css/clear-fix/

谢谢。