Keep inline button & input type: text

html5
css3

#1

Hey guys. How to keep inline these input type text & button?

HTML

<td class="col item-qty" data-th="Quantity">
	<div class="quantity clearfix">
	     <input type="button" value="-" class="minus" id="minus<?=$val['product_id']?>" onclick="update_quantity_in_cart('<?=$val['product_id']?>','minus')">
         <input type="text" readonly name="quantity" id="quantity<?=$val['product_id']?>" value="<?=$val['product_qty']?>" class="qty" />
         <input type="button" value="+" class="plus" id="plus<?=$val['product_id']?>" onclick="update_quantity_in_cart('<?=$val['product_id']?>','plus')">
    </div>
</td>

CSS

.quantity .qty {
	float: left;
	width: 36px;
	height: 40px;
	line-height: 40px;
	border: 0;
	border-left: 1px solid #111;
	border-right: 1px solid #111;
	background-color: #111;
	text-align: center;
	margin-bottom: 0;
	color: #FFF;
}

.quantity .plus,
.quantity .minus {
	display: block;
	float: left;
	cursor: pointer;
	border: 1px solid #111;
	padding: 0;
	width: 36px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: transparent;
	font-size: 16px;
	font-weight: bold;
	transition: background-color .2s linear;
	-webkit-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
}

Media Query

.cart-wrapper .col.item-qty .quantity {
	float: right;
	margin: 0;
}

.cart-wrapper .col.item-qty, 
.cart-wrapper .col.product-price,
.cart-wrapper .col.sub-total, 
.cart-wrapper .col.item-remove {
	box-sizing: border-box;
    	display: block;
    	float: left;
    	white-space: nowrap;
    	width: 33%;
}


#2

@PaulOB


#3

Help guys. It should be like this:


#4

You are having a float drop down due to lack of space for the input widths

On <td class="col item-qty" you have width:33%

At some point, the 3 inputs at width:36px; + borders is exceeding the <td> width:33% causing a float drop

It only takes one pixel to make a float drop

Try narrowing the widths of your inputs to 34px or whatever prevents the float drop


#5

Yeah. I did it now my problem is, how do I center the div quantity (input &button)? I tried margin: 0 auto; but it's not working.


#6

You can't center three floats with margin 0 auto;
That only works on one element (their parent) with a width.

The 3 input's parent is .quantity
You would need to remove the float: right; from .quantity then it would center with margin 0 auto;

You will need to set up a new class or selector for that situation.

If it does not conflict with any other parts on the page a simple correction here should work..

.cart-wrapper .col.item-qty .quantity {
	/*float: right;*/
        width: ; /*total width of 3 inputs*/
	margin: 0 auto;
}

If the inputs were inline-blocks then you could center all three of them with text-align:center on the parent.
Then you will have whitespace nodes to contend with in order to get the inputs right next to each other.


#7

Something like this should work

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test Page</title>
<style>
.quantity {
    display:table;/*contain floats*/
    min-width:106px;
    margin:0 auto;
    /*visual test rules below - remove on real page*/
    padding:2px;
    outline:1px dashed red;
}
.quantity div { /*simulate inputs*/
    float:left;
    width:34px;
    height:40px;
    border:1px solid;
}
.quantity div:nth-child(2) {
    border-width:1px 0;
}
</style>
</head>

<body>

<div class="quantity">
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>

#8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.