같은 줄에 두 개의 제출 버튼을 정렬하는 방법

다른 목적으로 두 개의 제출 버튼이있는 페이지가 있는데, 그 중 하나는 표 안쪽에 지정되어 있습니다. 동일한 행에 정렬하려고합니다.같은 줄에 두 개의 제출 버튼을 정렬하는 방법

HTML은 내가 그것을 같은 라인에서 발생되고 싶어,

<td> 
<div> 
Involved: 
<form> 
<input type="submit" value="Add from list"> 
</form> 
<p>or</p>  
<form> 
<input type="submit" value="Type a name"> 
</form> 
</div> 
</td>

은 위의 같은 라인에있는 버튼과 단어를 생산할 예정이다.

는

내가이 작업을 수행하는 방법을 알고있다 "참여 (이름을 입력) 또는 (목록에서 추가)"와 같은 것 같다.

덕분에,

출처

2013-04-13 user2086641

수이 CSS를

div#frm *{display:inline}

및 HTML을 시도'태그가 있으므로 html이 유효하지 않습니다. – Arjan

당신은 당신의 HTML, 당신은 <div> 아니라 테이블을 사용할 수있는 많은 요소

<td> 
    <form>Involved: <input type="submit" value="Add from list"> or <input type="submit" value="Type a name"></form> 
</td>

출처

2013-04-13 10:47:14 monkeyinsight

의 필요없이 엉망이있다. 버튼에 CSS 값 display:inline-block;

출처

2013-04-13 10:50:03 Vector

먼저, 중간에 끝 div 블록이 있기 때문에 코드가 유효하지 않습니다.

형태는 블럭 요소입니다. 브라우저가 최소한 새로운 줄에만 표시합니다 (적어도 스타일을 적용하지 않은 경우).

그럼 어떻게 할 수 있습니까? display : inline-block 인필 요소로 만들 수 있습니다. 단락과 동일합니다. 필요하지 않습니다. 어쨌든 추가하려는 경우 블록 요소이기 때문에이 스타일을 적용하고 인라인으로 만드십시오. inline vs block elements here

출처

2013-04-13 10:50:14 Ezix

<!DOCTYPE html> 
<html> 
<head> 
<style> 
form {display: inline-block;} 
</style> 
</head> 
<body> 

<table> 
<tr> 
<td> 
<form> 
    <label>Involved:</label> 
    <input type="submit" value="Add from list"> 
</form> 
<form> 
    <label>or</label> 
    <input type="submit" value="Type a name"> 
</form> 
</td> 
</tr> 
</table> 

</body> 
</html>

출처

2013-04-13 10:54:58

에

<div> 
Involved: 
    <form style="display:inline-block"> 
    <input type="submit" value="Add from list"> 
    </form> or  
    <form style="display:inline-block"> 
    <input type="submit" value="Type a name"> 
    </form> 
</div>

자세한 내용은`의

<div id="frm"> 
Involved: 
<form> 
<input type="submit" value="Add from list"> 
</form> 
<p>or</p>  
<form> 
<input type="submit" value="Type a name"> 
</form> 
</div>

출처

2013-04-13 10:58:51 Sunny

여기에 jsFiddle http://jsfiddle.net/3dA3y/1/ – Sunny

나를 위해 일했습니다. Btw'*'의 의미는 무엇입니까? 나는 그것이 그것없이 끊어지는 것을 알아 차렸다. – kaizenCoder

@aspiringCodingArtisan *은 야생 문자로 양식의 모든 하위 태그를 선택합니다. – Sunny

<div style="display: inline;" align="center"> 
     <div style="float: left;"> 
      <button style="color: white; padding: 15px 32px; text-align: center; text-decoration: none; border-radius: 4px; display: inline-block; font-size: 100%;">Hello</button> 
     </div> 
     <div style="float: right;"> 
      <button style="color: white; background-color: #4caf50; padding: 15px 32px; text-align: center; text-decoration: none; border-radius: 4px; display: inline-block; font-size: 100%;">Hello</button> 
    </div> 
</div>

출처

2017-08-23 10:14:42

같은 줄에 두 개의 제출 버튼을 정렬하는 방법

답변

관련 문제