CSS 플로트 스타일링

나는이 다음 코드 : '첫 번째'의 왼쪽에있는 격차의 원인은 무엇CSS 플로트 스타일링

enter image description here

<html> 

<head> 

<style> 

div.menu 
{ 
    float:left; 
} 

div ul.menu 
{ 
    border-style:solid; 
    border-width:2px; 
    float:left; 
} 

div li.menuitem 
{ 
    float:left; 
    margin:5px; 
    color:red; 
    background:green; 
    padding:5px; 
} 

div li.menuitem:hover{ 
    background:yellow; 
} 

</style> 

</head> 

<body> 

<div class="menu"> 
    <ul class="menu"> 
    <li class="menuitem"> first </li> 
    <li class="menuitem"> second </li> 
    <li class="menuitem"> third </li> 
    </ul> 
</div> 

</body> 

</html>

결과는 같다?

감사합니다.

출처

2014-01-20 Jake

네이티브 브라우저 프로퍼티는 왼쪽에 패딩을'ul'로 지정합니다. 'ul'에'padding : 0;'시도해보십시오. – Arkana

브라우저는 일반적으로 <ul> 및 <ol> 요소에 패딩을 추가하려면 .menu 클래스에 padding: 0px;를 추가합니다. Chrome에서 -webkit-padding-start을 설정할 수 있지만 <ul> 요소에 padding-left: 0 또는 padding: 0을 사용하는 것이 더 쉽습니다. -webkit-margin-before 및 after도 확인하십시오.

또한 설정할 수 있습니다 : list-style-type: none

http://jsfiddle.net/7n4Xn/1

출처

2014-01-20 20:35:56

ul 기본적으로 왼쪽에 약간의 채우기 공간이 생성됩니다.

li ul{ 
    padding:0; 
}

JSFiddle

출처

2014-01-20 20:34:47 zurfyx

나는 그 때문에 브라우저의 기본 스타일의 생각합니다.
css-reset 또는 normalize.css을 사용할 수 있습니다.

* { 
    margin:0; 
    padding:0; 
}

출처

2014-01-20 20:34:51 chris

당신은 list-style:none을 적용하고 ul에 대한 패딩/여백을 다시 설정해야합니다. 그래서 ul의 스타일이된다 :

div ul.menu { 
    border-style:solid; 
    border-width:2px; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
}

Here's a demo.

출처

2014-01-20 20:35:23 otinanai

는

출처

2014-01-20 20:35:51

당신이 당신의 사업부의 ul.menu 그래서

그것과 같을 것이다에

padding: 0px;

을 추가해야합니다 :

div ul.menu 
{ 
    border-style:solid; 
    border-width:2px; 
    float:left; 
    padding: 0px; 
}

출처

2014-01-20 20:38:54

CSS 플로트 스타일링

답변

관련 문제