发表新帖
发表新帖

Content move down when I apply float property

后端 未结
关注
3 1673
北恋
北恋 2021-01-25 21:28

I have to float the class time to right but when I try to float it right, its content moves down. Without float contents look fine but I have to float it.

h

3条回答
  • -上瘾入骨i
    -上瘾入骨i (楼主)
    2021-01-25 22:09

    Add overflow: hidden to the ul element:

    .main-nav ul {
  margin-bottom: 7px !important;
  overflow: hidden;
}


    .main-nav {
  color: #FFF;
  width: 100%;
  background-color: #5e2d91;
  float: right;
  line-height: 42px;
  margin-top: -3px;
}
.main-nav ul li {
  display: inline;
  padding: 0px 10px;
}
.main-nav ul li a {
  color: #FFF;
  text-decoration: none;
  padding: 20px 14px;
}
.main-nav ul {
  margin-bottom: 7px !important;
  overflow: hidden;
}
.main-nav ul li a:hover {
  background-color: #0098aa;
}
.main-nav ul li a:active {
  background-color: #6A006A;
}
.time {
  background: #5e2d91;
  color: #FFFFFF;
  border-color: #718b88;
  font-family: sans-serif;
  font-weight: bold;
  border-style: solid;
  margin-left: 10%;
  width: 228px;
  height: 33px;
  margin-top: 9px;
  float: right;
}

    When using floating container, always remember to clear the floats- see this answer for more information.

    Note that while using floating containers, you should always clear them before the next container that follows thereby creating a fresh block formatting context as it is called. Otherwise you will see unpredictable behavior.

    Instead of overflow: hidden you can also clear the float by using:

    .main-nav ul:after {
    content: '';
    display: block;
    clear: both;
}


    .main-nav {
  color: #FFF;
  width: 100%;
  background-color: #5e2d91;
  float: right;
  line-height: 42px;
  margin-top: -3px;
}
.main-nav ul li {
  display: inline;
  padding: 0px 10px;
}
.main-nav ul li a {
  color: #FFF;
  text-decoration: none;
  padding: 20px 14px;
}
.main-nav ul {
  margin-bottom: 7px !important;
}
.main-nav ul:after {
  content: '';
  display: block;
  clear: both;
}
.main-nav ul li a:hover {
  background-color: #0098aa;
}
.main-nav ul li a:active {
  background-color: #6A006A;
}
.time {
  background: #5e2d91;
  color: #FFFFFF;
  border-color: #718b88;
  font-family: sans-serif;
  font-weight: bold;
  border-style: solid;
  margin-left: 10%;
  width: 228px;
  height: 33px;
  margin-top: 9px;
  float: right;
}

    0 讨论(0)
 看不清?
提交回复
热议问题