한 행에 입력 버튼 정렬

I는 표 부를 가지고한 행에 입력 버튼 정렬

<td> 
    <form accept-charset="UTF-8" action="/line_items" method="post"> 
    <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1"> 
    <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину"> 
    </form> 
</td>

및 CSS (사스)

.qnt_to_cart, .qnt_to_cart2{ 
    width: 30px; 
    height: 20px; 
} 

.orange-button{ 
    display: inline-block; 
    padding: 6px; 
    @include gradient-background(bottom, $or1, #fbb752); 
    //background: url('button-carbon-bg.png') no-repeat, -webkit-linear-gradient(bottom, $or1, #fbb752); 
    @include border-radius(5px, 5px, 5px, 5px); 
    //background: transparent url('button-carbon-bg.png') no-repeat; 
    border: 1px solid #d27d00; 
    font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif; 
    font-weight: bold; 
    font-size: 16px; 
    color: $or3; 
    text-align: center; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, .70); 
    font-style: normal; 
    @include box-shadow(inset 0 1px 0 rgba(255,255,255,0.5)); 
    border-bottom:2px solid #B16900; 
}

All css file is here

는 지금이 참조 enter image description here

최소 코드 변환을 사용하여 한 줄에 두 요소를 배치하는 방법은 무엇입니까?

출처

2013-01-17 Valdis Azamaris

이 시도 :

<tr> 
    <td colspan="2"> 
    <form accept-charset="UTF-8" action="/line_items" method="post"> 
     <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1"> 
    </form> 
    </td> 

    <td align="right"> 
    <form accept-charset="UTF-8" action="/line_items" method="post"> 
     <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину"> 
    </form> 
    </td> 
</tr>

희망이 도움이!

출처

2013-01-17 11:16:49 Shalapolia

CSS 클래스에 float: left;을 추가하십시오.

귀하의 td이 충분히 넓다는 것을 고려하면 트릭을해야합니다.

출처

2013-01-17 11:09:58 Tikkes

2 개의 요소가 나란히있을 수있는 공간이 없어서 단추가 다음 줄로 넘어 가게됩니다.

상위 요소를 조금 넓게 설정해보십시오. 이 같은 사업부를 추가

편집

보십시오.

<td> 
    <form accept-charset="UTF-8" action="/line_items" method="post"> 
    <div class="wrapper_test"> 
     <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1"> 
     <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину"> 
    </div> 
    </form> 
</td>

그리고 CSS 또는

.wrapper_test { width: 150px } /* or a little more if needed */

이이를 추가 할 수 있습니다.

<td> 
    <form accept-charset="UTF-8" action="/line_items" method="post"> 
    <table><tr><td> 
     <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1"> 
    </td><td> 
     <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину"> 
    </td></td></table> 
    </form> 
</td>

출처

2013-01-17 11:10:38

TD 자동 –

에 잘 살고있는 부모 요소에

display:block;

으로 두 요소에 필요 텍스트 상자, 나란히 있어야합니다. 다른 아이디어로 수정 사항을 추가하겠습니다. –

display:inline-block;

당신이 테이블의 폭, 버튼을 제한 아무것도하지 않고 경우

출처

2013-04-17 12:37:15

한 행에 입력 버튼 정렬

답변

관련 문제