Creating a horizontally laid out group of items in HTML

问题

In Flex there is a container component called HGroup that lays out it's contents horizontally. What would the equivalent to the following be in HTML:

<HGroup gap="10">
   <button width="50"/>
   <button width="10"/>
   <button width="100"/>
</HGroup>

The features of the HGroup, for HTML developers, are that each item in the HGroup tag is positioned after the previous item. In the code above each button would be placed after the last. The gap property specifies how much space is between each item. The hgroup fits the width of all it's elements and does not wrap around to the next line. There is a verticalAlign property that aligns the elements top, middle or bottom.

I think a div or span tag with some sort of no wrap style the closest tag that mimics the HGroup behavior?

回答1:

On the elements that you want to be inline you set the display style to inline. Example,

<div name="HGroup531" style="position:absolute;left:138px;top:107px;width:180px;height:23px;">
    <input type="button" name="Button605" style="display:inline;padding-right:2px;vertical-align: middle;width:70px;height:21px;font-family:Arial;font-size:12px;" value="Button"/>
    <input type="button" name="Button635" style="display:inline;vertical-align: middle;width:70px;height:21px;font-family:Arial;font-size:12px;" value="Button"/>
</div>

At least this is how you do it to the best of my knowledge.

来源：https://stackoverflow.com/questions/16658351/creating-a-horizontally-laid-out-group-of-items-in-html