how to set the width on an inline element?

Question

I have this css:

.test {
    background-color:#00ff00;
    display: inline;    
    width: 200px;
}

<div class="test">test1</div>
<div class="test">test2</div>

But it seems that the width is not read. How to change the css? Thanks

Answer 1

inline items cannot have an explicitly set width. Use inline-block instead.

.test {
    background-color:#00ff00;
    display: inline-block;
    width: 200px;
}

Note, though, that IE 6/7 have compatibility issues with inline-block, it doesn't apply properly to elements that are block-level by default. These issues can be resolved.

Answer 2

We cannot set width for inline. But if we use inline-block we cannot place child elements in one row So please use inline-table. This is style that I have tested

.test {
    background-color:#00ff00;
    display: inline-table;
    width: 200px;
}

I have checked this. Use display:inline-table. It works well.