Programing

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

crosscheck 2020. 6. 28. 18:35
반응형

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


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

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

(점은 들여 쓰기를 보여줍니다)

나는 많은 솔루션을 읽었으며 텍스트 들여 쓰기, 목록 스타일을 사용하여 여백과 패딩을 0으로 설정하려고 시도했지만 아무것도 작동하지 않습니다. 문제는 목록 위에 머리글이 있어야 중앙에 위치해야하므로 여백을 자동으로 설정하고 아래 목록을 엉망으로 만드는 것입니다. 그러나 부모 div 안에 두 개의 div를 넣으면 작동하지 않습니다.

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/


-webkit-padding-start: 0;

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


이것을 다음에서 제거하십시오 #info.

    margin-left:auto;

헤더에 이것을 추가하십시오 :

#info p {
    text-align: center;
}

고정 너비 등이 필요합니까? 내 의견으로는 필요하지 않은 것들을 제거하고 헤더를 중심에 배치했습니다 text-align.

샘플
http://jsfiddle.net/Vc8CB/

참고 URL : https://stackoverflow.com/questions/9620594/removing-ul-indentation-with-css

반응형