programing

스팬의 CSS 고정 너비

testmans 2023. 8. 28. 20:53
반응형

스팬의 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"의 정당성은 중요하지 않습니다.

게으른 동물 문자는 추가 요소로 포장될 수도 있지만 다시 확인해봐야겠습니다.

이상적인 세계에서 당신은 단순히 다음의 css를 사용하여 이것을 달성할 것입니다.

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

FF2 이하를 제외한 모든 브라우저에서 작동합니다.

Firefox 2 이하에서는 이 값을 지원하지 않습니다.-moz-in-line-box를 사용할 수 있지만 인라인 블록과 동일하지 않으며 일부 상황에서는 예상대로 작동하지 않을 수 있습니다.

쿼크 모드에서 따옴표 사용

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이 말한 것처럼 "빈" 스팬에 끊기지 않는 공간을 넣어야 하지만 인라인 요소에 너비를 할당할 수 없고 패딩/마진만 할당하여 너비를 지정할 수 있도록 플로팅으로 만들어야 합니다.

jsfidle 예제는 http://jsfiddle.net/laurensrietveld/JZ2Lg/ 을 참조하십시오.

안타깝게도 인라인 요소(또는 display:inline을 가진 요소)는 너비 속성을 무시합니다.대신 부동 소수점을 사용해야 합니다.

<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">&nbsp;</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>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

HTML 5.0을 사용하여 텍스트 블록의 너비를 수정할 수 있습니다.<span>또는<div>.

enter image description here

위해서<span>중요한 것은 다음 CCS 라인을 추가하는 것입니다.

display: inline-block;

당신의 공허함을 위하여<span>중요한 것은 추가하는 것입니다.&nbsp;공간.

내 코드는 다음과 같습니다.

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;
	}
&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</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>

PS: 정의했습니다.tab수업이 이유는ul li spanCSS 선택기가 내 PC에서 작동하지 않습니다!

<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

이 방법을 사용하여 인라인 요소의 너비를 할당할 수 있습니다.

이 경우 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요소는 상대적이며 스팬 요소를 절대적으로 포맷합니다.top:0;left:0;그래서 그것은 왼쪽 위에 유지되고 당신은 그것을 설정합니다.padding-left(또는:padding:0px 0px 0px 80px;스팬 요소에 대한 사용 가능한 공간을 설정합니다.

단순한 경우에 더 잘 작동할 것입니다.

이것을 먹어보세요.

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">

테이블을 사용하여 할 수 있지만 순수한 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>

아니면 텍스트를 "패딩"하는 것을 의미하는 건가요?그것은 이런 맥락에서 모호한 작업입니다.

숙제 문제처럼 들리네요.우리가 숙제를 대신 하게 하려는 게 아니길 바라요?

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' 카테고리의 다른 글

SQL: 날짜 범위별, 연도별 그룹별로 두 테이블 결합  (0) 2023.08.28
iOS 13용 SF 심볼에 가중치를 설정하려면 어떻게 해야 합니까?  (0) 2023.08.28
nbsp가 CSS 콘텐츠 태그에서 작동하지 않습니다.  (0) 2023.08.28
appcompat-v7의 도구 모음에서 제목 제거  (0) 2023.08.28
로드 데이터 로컬 INFILE을 사용하여 n-to-n 관계 채우기  (0) 2023.08.28

'programing'의 다른글

  • 현재글스팬의 CSS 고정 너비

관련글

댓글

티스토리툴바