CSS를 사용하여 Ul 들여쓰기 제거

CSS를 사용하여 Ul 들여쓰기 제거

목록의 긴 줄이 줄을 감으면 순서가 지정되지 않은 목록에서 들여쓰기를 제거할 수 없습니다.내 목록은 다음과 같습니다.

• Windows 사용자는 퍼티를 사용할 수 있습니다.
• Mac 사용자는 Terminal.app을 사용할 수 있습니다.
• Linux 사용자는 SSH userid@ourserver.com 포트 22를 사용할 수 있습니다.
• ...........>또는 Cyberduck과 같은 SFTP 프로그램을 사용하여 ..........................................>ourserver.com , 포트 22

(점은 들여쓰기를 나타냅니다)

저는 많은 해결책을 읽고 텍스트에 의존하지 않는 목록 스타일을 사용하여 여백과 패딩을 0으로 설정하려고 시도했지만 아무 것도 작동하지 않습니다.문제는 목록 위에 제가 중심을 잡아야 하는 제목이 있어서 여백을 자동으로 설정하고 아래 목록을 엉망으로 만들고 있다는 것입니다.하지만 제가 두 개의 디브를 부모 디브 안에 넣더라도 그것은 작동하지 않습니다.

여기 HTML/CSS가 있습니다(다른 솔루션이 모두 실패할 수 있는 설정이 있을 경우를 대비하여 모든 것을 포함했습니다)

<div id="info">
    <p><strong>Did you know you can SSH directly to ourserver.com?</strong> </p> 
    <ul>
        <li>Windows users can use putty</li>
        <li>Mac users can use the <a href="http://www.terminfo.org">Terminal.app</a></li>
        <li>Linux users can use SSH userid@ourserver.com port 22</li>
        <li>Or use an SFTP program like <a href="http://cyberduck.ch/">Cyberduck</a> just point it at ourserver.com, port 22</li>
    </ul>
</div>

#info {
    color:#FFFFFF;
    width:440px;
    margin-left:auto;
    margin-right:auto;
    border-radius: 10px;
    border-style:solid;
    border-width:2px;
    border-color:#FFF; 
    padding-bottom:20px; padding-left:20px; padding-right:20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
}
#info ul li { 
    float:left;
}

이 코드는 들여쓰기 및 목록 글머리 기호를 제거합니다.

ul {
    padding: 0;
    list-style-type: none;
}

http://jsfiddle.net/qeqtK/2/

글머리 기호를 유지하려면 목록 유형: 없음을 목록 유형-위치: 내부 또는 단축형 목록 유형: 내부로 바꿀 수 있습니다.

ul {
  list-style-position: inside;
  padding-left: 0;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese</li>
            <li>Feta</li>
        </ul>
    </li>
</ul>

-webkit-padding-start: 0;

웹킷 엔진에 의해 추가된 패딩을 제거합니다.

언급URL : https://stackoverflow.com/questions/9620594/removing-ul-indentation-with-css