순서가없는 목록 내에서 :
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
클래스 또는 스타일 속성을 추가 할 수는 있지만 텍스트를 채우거나 태그를 추가하거나 변경할 수 없습니다.
페이지가 Courier New로 렌더링됩니다.
스팬 이후에 텍스트를 정렬하는 것이 목표입니다.
The lazy dog.
AND The lazy cat.
OR The active goldfish.
"OR"의 정당성은 중요하지 않습니다.
게으른 동물 텍스트는 추가 요소로 싸여있을 수 있지만 다시 확인해야합니다.
답변:
ul {
list-style-type: none;
padding-left: 0px;
}
ul li span {
float: left;
width: 40px;
}<ul>
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>Eoin이 말했듯이, "빈"범위에 비파괴 공간을 넣어야하지만 인라인 요소에 너비를 할당 할 수없고 패딩 / 여백 만 지정할 수 있으므로 플로팅을해야 플로팅 할 수 있습니다 너비를 지정하십시오.
jsfiddle 예제는 http://jsfiddle.net/laurensrietveld/JZ2Lg/를 참조하십시오.
diplay: inline-block; width: 32px;최신 브라우저에서 수행 될 것입니다.
diplay를 읽을 수 있도록 변경할 수 있습니다 display. 고마워
이상적인 세계에서는 다음 CSS를 사용하여 간단히 달성 할 수 있습니다.
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>
이것은 FF2 이하의 모든 브라우저에서 작동합니다.
Firefox 2 이하는이 값을 지원하지 않습니다. -moz-inline-box를 사용할 수 있지만 인라인 블록과 같지 않으며 일부 상황에서 예상대로 작동하지 않을 수 있습니다.
quirksmode 에서 가져온 견적
불행히도 인라인 요소 (또는 display : inline이있는 요소)는 width 속성을 무시합니다. 대신 부동 div를 사용해야합니다.
<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>
<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>이제 범위와 목록을 사용해야하므로이 부분을 약간 다시 작성해야합니다.
<html><head>
<style type="text/css">
span.f1 { display: block; float: left; clear: left; width: 60px; }
li { list-style-type: none; }
</style>
</head><body>
<ul>
<li><span class="f1"> </span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html><span>태그로 설정 될 필요 display:block가 인라인 요소 폭 무시한다.
그래서:
<style type="text/css"> span { width: 50px; display: block; } </style>그리고:
<li><span> </span>something</li>
<li><span>AND</span>something else</li><style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>인라인 요소의 너비를 지정하기 위해이 방법을 사용할 수 있습니다
이 경우 사람들은 span 요소가 될 수 없습니다. li 요소 사이의 나머지 텍스트는 아래로 이동하기 때문입니다. 또한 float를 사용하는 것은 전체 li 요소의 너비를 설정해야 하며이 너비는 전체 ul 요소 또는 다른 컨테이너의 너비와 동일해야하기 때문에 매우 나쁜 생각입니다.
html에서 이와 같은 것을 시도하십시오 :
<li><span></span><strong>The</strong> lazy dog.</li>
<li><span>AND</span> <strong>The</strong> lazy cat.</li>
<li><span>OR</span> <strong>The</strong> active goldfish.</li>그리고 CSS에서
li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else따라서 li 요소가 상대적 일 때 span 요소를 절대 및 최상위로 서식을 지정합니다 .0; left : 0; 따라서 왼쪽 위를 유지하고 padding-left (또는 padding : 0px 0px 0px 80px;)를 설정하여 span 요소의 여유 공간을 설정합니다.
간단한 경우에는 더 잘 작동합니다.
HTML 5.0을 사용하여, 텍스트 블록의 수정 폭을 사용하는 것이 가능하다 <span>나 <div>.
의 경우 <span>중요한 것은 다음 CCS 라인을 추가하는 것입니다
display: inline-block;빈 공간을 확보 <span>하는 것이 중요 합니다.
내 코드는 다음과 같습니다
body
{
font-family: Arial;
font-size:20px;
}
div
{
width:200px;
font-size:80px;
background-color: lime;
}
div span
{
display:block;
width:200px;
background-color: lime;
}
ul li span
{
display: inline-block;
width: 80px;
background-color: yellow;
}
span.tab
{
display: inline-block;
width: 80px;
background-color: yellow;
}<DIV>
<div class='test'>ABCDEF</div>
<SPAN>
<div>
<span class='test'>ABCDEF</span>
</div
<br>
<ul>
<li><span class='tab'> </span> The lazy dog.</li>
<li><span class='tab'>AND</span> The lazy cat.</li>
<li><span class='tab'>OR</span> The active goldfish.</li>
</ul>추신 : CSS 선택기가 내 PC에서 작동하지 tab않기 때문에 클래스를 정의했습니다 ul li span!
테이블을 사용하여 할 수 있지만 순수한 CSS는 아닙니다.
<style>
ul{
text-indent: 40px;
}
li{
list-style-type: none;
padding: 0;
}
span{
color: #ff0000;
position: relative;
left: -40px;
}
</style>
<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>각 옵션에서 라인을 전환하기 때문에 원하는대로 정확하게 표시되지 않습니다. 그러나 이것이 답변에 더 가까이 다가 가기를 바랍니다.
ul {
list-style-type: none;
padding-left: 0px;
}
ul li span {
float: left;
width: 40px;
}<ul>
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>