2014-07-15 1 views
0

<p> 태그 안에있는 내용을 조작하려고했습니다. 단락 안의 각 요소를 대상으로하고 싶습니다. 나는 다음이 :이 수는 양식을 통해 생성되는단락 내부에서 입력 값과 내용을 조작하는 중

<p class="num">123456789</p> 

내가 이렇게 CSS를 통해 각 번호에 패딩을 추가하고 싶어, 그것은 가능하다? 나는 몇 가지를 시도했지만 도움이되지 못했습니다.

내 CSS :

또 다른 것은 내가 아니라 내 코드가 입력 값을 조작려고한다
*p.num {padding-right:5px;} 
    p.num * {padding-right:5px;} 

: 이전의 IE는하지 않습니다 때문에 모두 가치와 자리 표시자를 사용했다

<input type="text" value="Name" placeholder="Name" /> 

지원 자리 표시 자이며 그 이유는 가치를 목표로 삼아 새로운 브라우저에서이를 비활성화 할 수 있기를 바랍니다. 나는이 일에 몇 가지 시도 :

input[value="Name"] {font-size:0;} 
    input[value="Name"] {display:none;} 

첫 번째뿐만 아니라 자리를 0과 1 두 번째는 완전히 입력을 숨 깁니다. 그래서, 내가 이것을 달성 할 수있는 가능한 CSS가 있는지 알고 싶습니다. 첫 번째 질문에 대한

+1

질문의 첫 번째 부분에서 숫자 사이에 약간의 공백을 원하십니까? 당신은'letter-spacing : 5px'를 사용할 수 있습니다. 두 번째 부분에서 원하는 결과는 무엇입니까? – LinkinTED

+0

그래서 새로운 브라우저에 ** 자리 표시 자 **를 표시하고 이전 브라우저에는 ** value **를 표시 하시겠습니까? – Nivedita

+0

@LinkinTED 원하는 결과가 최신 브라우저에 모두 표시되고 싶지 않습니다. –

답변

3

는, 해결책은 아주 간단합니다 :

사용이 CSS 규칙,

p.num { 
    letter-spacing: 1em; 
} 
1

당신은 재산 간격 편지를 의미합니까?

<input id="name" type="text" value="Name" placeholder="Name" /> 

을 그리고 CSS를 이런 식으로 뭔가 될 것입니다 : 이 같은 입력 상자의 ID 또는 클래스를 만들어야합니다

#name{ letter-spacing: 3px; } 
1

라벨은 입력 및 PARA를 조작했다. 그래서 나는 그것을 조작하는 방법을 보여줍니다.

Fiddle Demo

설명

<form class="formclass"> 
    <p class="num">213213</p> 
    <p class="num">213</p> 
    <p class="notNum">sadas</p> 

    <input type="text" value="vals"></input> 
</form> 

첫 번째 질문에 대한 CSS

.formclass p.num 
{ 
    color: red; 
} 

.formclass input[value="vals"] 
{ 
    color: brown; 
} 
0

당신이 JQuery와

$('.num').css('padding-right','5px'); 
을 시도 할 수 있습니다

또는 기본 JQuery와보다 당신이 글자 사이의 간격을 위해 순수 CSS

.num{ padding-right:5px; } 
0

를 작성할 수, 사용 :

p.num{letter-spacing:2px;} 

브라우저 종류에 따라 내용을 표시 들어, 당신은 조건부 주석을 사용해야합니다 :

<!--[if IE]> 
Place content here to target all Internet Explorer users. 
<![endif]--> 

<![if !IE]> 
Place content here to target all users not using Internet Explorer. 
<![endif]> 

<!--[if gte IE 8]> 
Place content here to target users of Internet Explorer 8 or higher. 
<![endif]--> 

<!--[if lt IE 7]> 
Place content here to target users of Internet Explorer 6 or lower (less than 7). 
<![endif]--> 

이 정보는 도움이 될 것입니다. Read more

Stackoverflow 자체에서 this answer을 확인할 수도 있습니다.

+1

나는 이미 IE 9 조건부 주석보다 적은 수의 브라우저와 다른 CSS 파일을 사용하고 있지만 CSS 솔루션이 필요합니다. –

+1

내 지식에 따라 순수한 CSS를 통해 가능하지 않다고 생각합니다. HTML 또는 자바 스크립트를 사용하거나 다른 대답을 기다릴 수도 있습니다. – Nivedita

관련 문제