반응형
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;
}
-webkit-padding-start: 0;
웹킷 엔진에 의해 추가 된 패딩을 제거합니다
이것을 다음에서 제거하십시오 #info
.
margin-left:auto;
헤더에 이것을 추가하십시오 :
#info p {
text-align: center;
}
고정 너비 등이 필요합니까? 내 의견으로는 필요하지 않은 것들을 제거하고 헤더를 중심에 배치했습니다 text-align
.
참고 URL : https://stackoverflow.com/questions/9620594/removing-ul-indentation-with-css
반응형
'Programing' 카테고리의 다른 글
Java로 날짜에 n 시간을 추가 하시겠습니까? (0) | 2020.06.29 |
---|---|
“import *”가 나쁜 이유는 무엇입니까? (0) | 2020.06.28 |
C ++ 재정의 헤더 파일 (winsock2.h) (0) | 2020.06.28 |
NodeJS는 글로벌 모듈 / 패키지를 필요로합니다 (0) | 2020.06.28 |
스프링 부트-초기 데이터로드 (0) | 2020.06.28 |