나는 지금 빡빡한 상황에 처해 있습니다. 정렬되지 않은 목록 상자를 중간에 정렬하고 싶지만 실패했습니다. 모든 수단을 시도했지만 해결하지 못했습니다. 어떻게 든 중앙 지역에 있지만 데드 센터는 아닙니다. 마진에 뭔가 잘못했다고 믿었습니다. 그러나 10px의 여백이 필요합니다 (상단 및 하단). 나를 도울 수있는 사람에게 정말 감사합니다.
HTML
<div class="lessons">
<h1>Video</h1>
<ul>
<a href=""><li>
<h2>Video 1</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</li></a>
<a href=""><li>
<h2>Video 3</h2>
<p>Magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
</li></a>
</ul>
</div>
CSS
h1
{
text-align:center;
}
.lessons
{
background-color: #e6e7e8;
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom:50px;
}
ul
{
margin:0 auto;
width:50%;
}
li
{
margin:10px;
display: inline-block;
list-style-type: none;
width:285px;
height:200px;
background-color: #fff;
color:#000;
-o-transition: all .2s; /* For Safari 3.1 to 6.0 */
-ms-transition: all .2s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all .2s; /* For Safari 3.1 to 6.0 */
transition: all .2s;
}
li:hover
{
background-color: #ff7765;
color:#fff;
}
li p
{
padding:15px;
font-size:90%;
font-weight: 100;
}
JSFiddle : http://jsfiddle.net/rezasan/x58SG/
바이올린 : http://jsfiddle.net/x58SG/1/
ulCSS를 다음과 같이 변경 했습니다.
ul {
margin:0 auto;
padding: 0;
}
ul에 요소는 기본적으로 왼쪽 패딩을하는 데, 당신이를 재설정 할 수 있습니다 있도록. 또한에 width: 50%대해 너무 좁아 li상위 컨테이너가 넘쳤습니다.
나중에 참고할 수 있도록 이러한 종류의 문제를 디버깅 할 때 Chrome의 개발자 도구가 필수적이라는 것을 알게되었습니다. 요소를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택합니다. 선택기 위로 마우스를 가져 가면 크롬이 페이지에서 강조 표시하여 너비, 패딩, 여백 등을 볼 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다