[html] HTML <FORM>을 인라인 요소로 표시하는 방법은 무엇입니까?

Program / 글쓴이

이것은 아마도 기본적인 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>

답변

인라인 래퍼를 추가합니다.

<div style='display:flex'>
<form>
 <p>Read this sentence</p>
 <input type='submit' value='or push this button' />
</form>
<div>
    <p>Message here</p>
</div>