0
일부 UL 태그에 문제가 있습니다. 첫 번째 태그 옆에 두 번째 태그가 있으면 웹 페이지의 꼬리말을 푸시하고 누를 수 있습니다. 왜 아무 생각 없어? 너무 많이 미리 감사드립니다!두 개의 정렬되지 않은 목록은 다른 요소를 서로 멀리 밀어 내고 있습니다. (HTML, CSS)
코드 : 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>
코드 : 두 UL이 제대로 앉아되지 않았 음을 의미에서 문제가 발생했다
.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;
}
단지 관련 코드와 바이올린을 만드십시오 도움을 변경 . 고마워요 – Sai
질문을 할 때 코드 스 니펫 버튼을 사용하십시오. – Sai
여기 [fiddle] (http://jsfiddle.net/kdcjj9kc/)입니다. 바닥 글이 'clear : both;'가 필요하지만 일부는 다른 문제. 그래서 일반적으로 플로트 문제입니다. – HJ05