multiple rows using inline-block and percentage width

Question

within a jquery mobile popup I would like to show five links per rows.

HTML:

<div data-role="page" id="home">
    <a href="#popup1" id="btn1" data-role="button" data-rel="popup">button 1</a>
    <a href="#popup2" id="btn2" data-role="button" data-rel="popup">button 2</a>

    <div data-role="popup" id="popup1" class="ui-content">
        <a href="#">111</a>
        <a href="#">222</a>
        <a href="#">333</a>
        <a href="#">444</a>
        <a href="#">555</a>
        <a href="#">666</a>
        <a href="#">777</a>
        <a href="#">888</a>
        <a href="#">999</a>
    </div>
    <div data-role="popup" id="popup2" class="ui-content">
        <a href="#">111</a>
        <a href="#">222</a>
        <a href="#">333</a>
    </div>
</div>

CSS:

a {
    display: inline-block;
    width: 20%
}

When I click button 1 popup correctly shows 9 links splitted into two rows; Click on the second button, instead, displays three links all attached. Why?

All can be viewed in http://jsfiddle.net/5EwTb/3/

Thanks.

You need to set a min-width of the popup. http://jsfiddle.net/Palestinian/Xx6wk/ — Omar, Nov 26 '13 at 23:00

score 1 · Accepted Answer · answered Nov 26 '13 at 23:07

Wrap the links in div data-role="content" and remove .ui-content from popup div. then you need to set a width to content div.

<div data-role="popup" id="popup2">
  <div data-role="content">
    <a href="#">111</a>
    <a href="#">222</a>
    <a href="#">333</a>
  </div>
</div>

.ui-popup .ui-content {
  min-width: 150px;
}

Demo

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

The problem are the white spaces that get generated between the inline-block elements - they add to the 20% and push the last one (out of the 5) to the next line.

So it works if you eliminate the spaces/line-breaks between the anchors in your markup: DEMO
To set this straight you can see some techniques here: How to remove the space between inline-block elements?

edited May 23 '17 at 11:49

Community

1
1

answered Nov 26 '13 at 23:06

Martin Turjak

20,896
5
56
76

Thanks Martin. Your demo seems to have a little problem with button two because it has the same problem. However I have corrected my html with yours advices to avoid extra space between inline-blok. – CorPao Nov 28 '13 at 15:52

multiple rows using inline-block and percentage width

2 Answers2