Program Tip

HTML을 표시하는 방법

programtip 2020. 10. 7. 08:09
반응형

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

반응형