两个无序列表正在推动其他元素彼此远离。 （HTML，CSS）

时间：2014-11-06 16:51:17

标签： html css web

我遇到了一些UL标签的问题，如果我在第一个标签旁边有第二个标签，它会推动并搜索网页的页脚。有谁知道为什么？非常感谢你提前！

代码：HTML 

<div class="container">
            <div class="paragraph-brands paragraph">
                <h1 class="brands-heading"> Brands - Find Your Favourite! </h1>

                <p class="brands-para"> Lorem ipsum dolor sit amet, consectetur adipiscing     elit. Nam malesuada vel metus sodales facilisis: </p> 

                <ul class="brands-list-1">
                    <li> BST Bathroom Accessories </li>
                    <li class="blue"> Burlington bathroom accessories </li>
                    <li> Croydex Bathroom Accessories </li>
                    <li class="blue"> Dietsche bathroom accessories </li>
                    <li> Eastbrook heated towel rails </li>
                    <li class="blue"> Elite bathroom mirrors </li>
                    <li> Euroshowers bathroom accessories </li>
                    <li class="blue"> HIB bathroom accessories </li>
                    <li> JIS heated towel rails </li>
                </ul>


                <ul class="brands-list-2">
                    <li> MHS Radiators </li>
                    <li class="blue"> Marflow bathroom accessories </li>
                    <li> Methven Deva taps </li>
                    <li class="blue"> Moods bathroom accessories</li>
                    <li> Patterson Elderly and Disabled </li>
                    <li class="blue"> Reina heated towel rails </li>
                    <li> Showerdrape bathroom accessories </li>
                    <li class="blue"> Smedbo bathroom accessories </li>
                    <li> Stuart Turner shower pumps </li>
                </ul>
            </div> <!-- Paragraph Brands -->
        </div> <!-- Container -->
    </div> <!-- Brands -->

    <footer>
        <div class="container">
            <div class="footer-list">
                <ul>
                    <li><a href="index.html"> HOME </a></li>
                    <li><a href="about.html"> ABOUT </a></li>
                    <li><a href="products.html"> PRODUCTS </a></li>
                    <li><a href="http://www.bstaccessories.co.uk/"> SHOP </a></li>
                    <li><a href="contact.html"> CONTACT </a></li>
                </ul>
            </div> <!-- Footer List -->

            <div class="copyright-link">
                <p class="words"> Copyright © BSTBathrooms 2014 <br> Website: <a href="http://www.webscriptdesign.co.uk"> webscriptdesign.co.uk </p>
            </div> <!-- Copyright Link -->
        </div> <!-- Container -->
    </footer>

代码：CSS 

.paragraph {
    width: 534px;
    margin-left: 36px;
    padding-top: 55px;
}

.products-heading {
    font-family: Lato;
    font-weight: 300;
    margin: 0px;
}

.products-para {
    font-family: Lato;
    font-weight: 300;
}

.list-intro {
    font-family: Lato;
    font-weight: 300;
    font-size: 20px;
    padding-top: 10px;
}

.list-items {
    line-height: 3;
}

.list-items li {
    text-decoration: none;
    list-style: none;
    color: #07adfb;
    font-family: Lato;
    font-weight: 300;
}

.list-items li a {
    text-decoration: none;
    list-style: none;
    color: #07adfb;
    font-family: Lato;
    font-weight: 300;
}

.products-image img {
    position: relative;
    top: -380px;
    right: 36px;
    float: right;

}

/** BRANDS **/

.brands {
    height: 673px;
    width: auto;
    background-color: white;
    position: relative;
    top: -46px;
}

.brands-heading {
    font-family: Lato;
    font-weight: 300;
    margin: 0px;
}

.brands-para {
    font-family: Lato;
    font-weight: 300;
}

.brands-list-1 {
    line-height: 3;
    overflow: hidden;
}

.brands-list-1 li {
    text-decoration: none;
    list-style: none;
    font-family: Lato;
    font-weight: 300;
}

.blue {
    color: #07adfb;
}

.brands-list-2 {
    line-height: 3;
    float: right;
    height: auto;
    position: relative;
    left: 56px;
    top: -464px;
    overflow: hidden;
    clear: both;


}

.brands-list-2 li {
    text-decoration: none;
    list-style: none;
    font-family: Lato;
    font-weight: 300;
    overflow: hidden;
    clear: both;
}


/** FOOTER **/

footer {
    height: 53px;
    width: auto;
    background-color: #303030;
    position: relative;
    top: -46px;
}

.footer-list ul {
    margin: 0px;
    padding-top: 15px;
}
.footer-list ul li {
    display: inline-block;
    margin: 0px;
}

.footer-list ul li a {
    margin: 0px;
    color: white;
    text-decoration: none;
    font-family: Lato;
    font-weight: 300;
    margin: 20px 20px 0px 0px;
}

.words {
    color: white;
    font-family: Lato;
    font-weight: 300;
    float: right;
    position: relative;
    top: -39px;
    right: 36px;
    line-height: 1.5;
}

.words a {
    color: white;
    font-weight: 300;
    text-decoration: none;
}

1 个答案:

答案 0 :(得分：0)

这两个ul在他们没有正确坐在一起的意义上引起了问题。在深入研究代码之后，您已经使用了位置属性，有点时髦（IMO无论如何）。所以我改变了一些零碎的东西......

这是片段......

＆＃13;
＆＃13; 
        .paragraph {
          width: 534px;
          margin-left: 36px;
          padding-top: 55px;
        }
        .products-heading {
          font-family: Lato;
          font-weight: 300;
          margin: 0px;
        }
        .products-para {
          font-family: Lato;
          font-weight: 300;
        }
        .list-intro {
          font-family: Lato;
          font-weight: 300;
          font-size: 20px;
          padding-top: 10px;
        }
        .list-items {
          line-height: 3;
        }
        .list-items li {
          text-decoration: none;
          list-style: none;
          color: #07adfb;
          font-family: Lato;
          font-weight: 300;
        }
        .list-items li a {
          text-decoration: none;
          list-style: none;
          color: #07adfb;
          font-family: Lato;
          font-weight: 300;
        }
        .products-image img {
          position: relative;
          top: -380px;
          right: 36px;
          float: right;
        }
        /** BRANDS **/
        .brands {
          height: 673px;
          width: auto;
          background-color: white;
          position: relative;
          top: -46px;
        }
        .brands-heading {
          font-family: Lato;
          font-weight: 300;
          margin: 0px;
        }
        .brands-para {
          font-family: Lato;
          font-weight: 300;
        }
        .brands-list-1 {
          line-height: 3;
          overflow: hidden;
          /* changes here */
          width: 50%;
          float: left;
          box-sizing: border-box;
        }
        .brands-list-1 li {
          text-decoration: none;
          list-style: none;
          font-family: Lato;
          font-weight: 300;
        }
        .blue {
          color: #07adfb;
        }
        .brands-list-2 {
          /* changes here */
          line-height: 3;
          float: right;
          height: auto;
          overflow: hidden;
          width: 50%;
          box-sizing: border-box;
        }
        .brands-list-2 li {
          text-decoration: none;
          list-style: none;
          font-family: Lato;
          font-weight: 300;
          overflow: hidden;
          clear: both;
        }
        /** FOOTER **/
        footer {
          height: 53px;
          width: auto;
          background-color: #303030;
          position: relative;
          top: -46px;
          clear: both;
          /* changes here */
        }
        .footer-list ul {
          margin: 0px;
          padding-top: 15px;
        }
        .footer-list ul li {
          display: inline-block;
          margin: 0px;
        }
        .footer-list ul li a {
          margin: 0px;
          color: white;
          text-decoration: none;
          font-family: Lato;
          font-weight: 300;
          margin: 20px 20px 0px 0px;
        }
        .words {
          color: white;
          font-family: Lato;
          font-weight: 300;
          float: right;
          position: relative;
          top: -39px;
          right: 36px;
          line-height: 1.5;
        }
        .words a {
          color: white;
          font-weight: 300;
          text-decoration: none;
        }
＆＃13; 
<div class="container">
  <div class="paragraph-brands paragraph">
    <h1 class="brands-heading"> Brands - Find Your Favourite! </h1>

    <p class="brands-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vel metus sodales facilisis:</p>
    <ul class="brands-list-1">
      <li>BST Bathroom Accessories</li>
      <li class="blue">Burlington bathroom accessories</li>
      <li>Croydex Bathroom Accessories</li>
      <li class="blue">Dietsche bathroom accessories</li>
      <li>Eastbrook heated towel rails</li>
      <li class="blue">Elite bathroom mirrors</li>
      <li>Euroshowers bathroom accessories</li>
      <li class="blue">HIB bathroom accessories</li>
      <li>JIS heated towel rails</li>
    </ul>
    <ul class="brands-list-2">
      <li>MHS Radiators</li>
      <li class="blue">Marflow bathroom accessories</li>
      <li>Methven Deva taps</li>
      <li class="blue">Moods bathroom accessories</li>
      <li>Patterson Elderly and Disabled</li>
      <li class="blue">Reina heated towel rails</li>
      <li>Showerdrape bathroom accessories</li>
      <li class="blue">Smedbo bathroom accessories</li>
      <li>Stuart Turner shower pumps</li>
    </ul>
  </div>
  <!-- Paragraph Brands -->
</div>
<!-- Container -->
</div>
<!-- Brands -->
<footer>
  <div class="container">
    <div class="footer-list">
      <ul>
        <li><a href="index.html"> HOME </a>
        </li>
        <li><a href="about.html"> ABOUT </a>
        </li>
        <li><a href="products.html"> PRODUCTS </a>
        </li>
        <li><a href="http://www.bstaccessories.co.uk/"> SHOP </a>
        </li>
        <li><a href="contact.html"> CONTACT </a>
        </li>
      </ul>
    </div>
    <!-- Footer List -->
    <div class="copyright-link">
      <p class="words">Copyright © BSTBathrooms 2014
        <br>Website: <a href="http://www.webscriptdesign.co.uk"> webscriptdesign.co.uk</a> 
      </p>
    </div>
    <!-- Copyright Link -->
  </div>
  <!-- Container -->
</footer>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助

相关问题
最新问题