범위에서 CSS 고정 너비
순서가없는 목록 내에서 :
<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/를 참조하십시오.
이상적인 세계에서는 다음 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 요소를 절대 및 최상위 형식으로 형식을 지정합니다. 따라서 왼쪽 상단에 머무르며 padding-left (또는 padding : 0px 0px 0px 80px;)를 설정하여 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>
각 옵션에서 라인을 전환하기 때문에 원하는대로 정확하게 표시되지 않습니다. 그러나 이것이 답변에 더 가까이 다가 가기를 바랍니다.
음, 항상 무차별 강제 방법이 있습니다.
<li><pre> The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR The active goldfish.</pre></li>
아니면 텍스트를 "패딩"한다는 의미입니까? 그것은이 맥락에서 모호한 작업입니다.
이것은 일종의 숙제 질문처럼 들립니다. 우리가 당신을 위해 숙제를하게하지 않기를 바랍니다.
이 시도
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
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>참고 URL : https://stackoverflow.com/questions/257505/css-fixed-width-in-a-span
'Programing' 카테고리의 다른 글
| 열거 형“상속” (0) | 2020.02.28 |
|---|---|
| "컨트롤에 코드 블록이 포함되어 있으므로 Controls 컬렉션을 수정할 수 없습니다" (0) | 2020.02.28 |
| Visual Studio Code에서 편집기와 통합 터미널 간 포커스 전환 (0) | 2020.02.28 |
| 목록 사이의 간격 (0) | 2020.02.28 |
| 가장 논란이 많은 프로그래밍 의견은 무엇입니까? (0) | 2020.02.28 |