CSS for Mobie site - search box and button combined 100% width?
Im trying to optimise my site for mobile. Im going with a 1 column liquid layout. The issue im having is that I cant get my search box and submit button to be 100% wide.
This is that I want:
I cant set a fixed width for the search box (an input). It also seems to ignore width: 100% and absolute positioning. Is there anyway of achieving this? I thought maybe if I made the input an inline element it would flow to 100%, but it doesn't seem to. Thanks
UPDATE - What about this: http://jsfiddle.net/jdln/3ms5f/
Ive made the search box 100% wide, but put it in a container div which has 5em of padding on the right. As the container div is 100% wide its knocks the button to the new row, but ive 'lifted' the button with absolute开发者_如何学运维 positioning.
It seems to work well when I resize the window. I thought the layout would be more robust if I used em for the widths instead of px, which means Ive had to normalize the text sizes.
Are there any issues with my solution? Thanks
http://jsfiddle.net/jdln/3ms5f/
Ive made the search box 100% wide, but put it in a container div which has 5em of padding on the right. As the container div is 100% wide its knocks the button to the new row, but ive 'lifted' the button with absolute positioning.
It seems to work well when I resize the window. I thought the layout would be more robust if I used em for the widths instead of px, which means Ive had to normalize the text sizes.
See here: http://jsfiddle.net/chricholson/wCvVB/9/
Notice I have had to turn off the borders from both inputs as these would add up to a number greater than 100% (ie. 80% width plus 2px (the border each side)). You could make the inputs 79% and 19% respectively and then try putting a 1px border.
I have put all inside a div with a width, but this could just as easily be the body tag which is by default 100% wide.
You need to contain the input fields properly and the width needs to be relative to their container. Try something like this:
CSS
.searchbar {
width:100%;
}
.searchfield, .searchbtn {
float:left;
}
.searchfield {
width:70%;
margin-right:5%;
}
.searchfield input {
width:100%;
}
.searchbtn {
width:25%;
}
HTML
<div class="searchbar">
<div class="searchfield">
<input type="text" name="Search" value="Search" />
</div>
<div class="searchbtn">
<input type="submit" value="Search" />
</div>
</div>
DEMO: http://jsfiddle.net/andresilich/pHwYG/
精彩评论