CSS three inline elements with align from left to right, how to occupy all available width

问题

I have a slider, with a div that contains the controls previous, start/stop sliding, next.

I set "text-align" to left, center and right, respectively, and display to "inline". I have no idea, now, how to fill the whole width.

Here is the markup:

<div id="external_promo_controls">
  <div id="promo_previous"></div>
  <div id="promo_auto_controls"></div>
  <div id="promo_next"></div>
</div>

And the CSS:

#external_promo_controls div{
    display: inline;
}
#promo_previous {text-align: left;}
#promo_auto_controls {text-align: center;}
#promo_next {text-align: right;}

I guess I could have it done with floating elements, however I got quite a mess trying to have a correct combination of elements being on one line and centering the element in the middle. I’d like to avoid positioning elements with pixel value, since it would break as soon as I change text, font, or size or the container, which are all events that will eventually occur.

回答1:

simple to use floats - this fiddle should set you on the right path:

http://jsfiddle.net/Q4paq/

New example with DIVs containg a link with a hover state.

http://jsfiddle.net/Q4paq/1/

回答2:

try this. I am not sure it will work or not but suppose all three inner divs has width of 100px each then

outerDiv specify the width to be 300px with no margin and padding

innerDiv width:100px and margin and padding are 0px and float : left.

if you want to specify margin and padding then summation of all three innerDiv's width + padding + margin + border * 3 should be the width of the outer div.

来源：https://stackoverflow.com/questions/12142980/css-three-inline-elements-with-align-from-left-to-right-how-to-occupy-all-avail

标签

css

inline

text-align