반응형
HTML을 표시하는 방법
이것은 아마도 기본적인 html / css 질문 일 것입니다 ...
단락 텍스트 내부에 인라인으로 표시하려는 간단한 원 버튼 양식이 있습니다.
<p>Read this sentence
<form style='display:inline;'>
<input style='display:inline;'
type='submit'
value='or push this button'/>
</form>.
</p>
양식에 style = display : inline 속성이 있지만 양식 앞에 줄 바꿈이 있습니다. 그것을 제거하는 방법이 있습니까?
양식 요소가 내부에 나타날 수 있습니까 <p>
?
양식 태그를 단락 바깥쪽으로 이동하고 여백 / 패딩을 0으로 설정합니다.
<form style="margin: 0; padding: 0;">
<p>
Read this sentence
<input style="display: inline;" type="submit" value="or push this button" />
</p>
</form>
<form>
안으로 들어갈 수 <p>
없습니다. 브라우저는 닫히지 않은 단락 요소라고 생각되는 것을 처리하려고 <p>
할 때 여는 <form>
태그에 도달하면 요소 를 갑자기 닫습니다 .
<p>Read this sentence
</p><form style='display:inline;'>
이 코드를 시도해 볼 수 있습니다.
<form action="#" method="get" id="login" style=" display:inline!important;">
<label for='User'>User:</label>
<input type='text' name='User' id='User'>
<label for='password'>Password:</label><input type='password' name='password' id='password'>
<input type="submit" name="log" id="log" class="botton" value="Login" />
</form>
주목해야 할 중요한 것은 <form>
태그 의 CSS 스타일 속성입니다 .
display:inline!important;
에 따르면 HTML 규격 을 모두 <form>
하고 <p>
있는 블록 요소와 당신이 그들을 중첩 할 수 없습니다. 아마 교체 <p>
와 함께 <span>
당신을 위해 일 것인가?
편집 : 죄송합니다. 나는 내 말을 빨리했다. 이 <p>
요소는 단락에 대한 HTML 사양에 지정된대로 내부 블록 콘텐츠를 허용하지 않습니다 .
단락 안에 제출 버튼을 포함하여 원하는 것을 달성 할 수 있습니다.
<pre>
<p>Read this sentence <input type='submit' value='or push this button'/></p>
</pre>
다음과 같이 스타일 float: left
을 사용하십시오 .
<p style="float: left"> Lorem Ipsum </p>
<form style="float: left">
<input type='submit'/>
</form>
<p style="float: left"> Lorem Ipsum </p>
참고 URL : https://stackoverflow.com/questions/1106720/how-to-display-html-form-as-inline-element
반응형
'Program Tip' 카테고리의 다른 글
Swift로 버전 및 빌드 정보 얻기 (0) | 2020.10.08 |
---|---|
'Get-ADUser'라는 용어는 cmdlet의 이름으로 인식되지 않습니다. (0) | 2020.10.07 |
"glob"유형 패턴에 대해 java.util.regex에 해당하는 것이 있습니까? (0) | 2020.10.07 |
함수 인수의 기본값 정의 (0) | 2020.10.07 |
Ruby 정규식에 Perl에서 "! ~"와 같은 일치하지 않는 연산자가 있습니까? (0) | 2020.10.07 |