Geek Answers Handbook

Positional buttons in a grid container using CSS

I have a container with several button style anchor tags (it may have more or fewer buttons):

<div class="menu-container">
    <div class="button-container">
       <a href="#/Action1" class="button">Action1</a>
       <a href="#/Action2" class="button">Action2</a>
       <a href="#/Action3" class="button">Action3</a>
       <a href="#/Action4" class="button">Action4</a>
       <a href="#/Action5" class="button">Action5</a>
    </div>
</div>

How do I style this with CSS to have these buttons listed as a grid with a maximum number of 4 columns? I tried with display:inline-blockand float:left, but to no avail.

I know that I need to set the width for the container, but I can’t, but all the anchor tags are inside the container. And this should be dynamic, as there can be more or less buttons ...

What I'm trying to achieve is something like:

enter image description here

+4
source share
2 answers

width height float inline. , , , "".

.button-container {
    width: 520px;
    background: gray;
    overflow-y: auto;
}

.button-container > a {
    width: 100px;
    height: 100px;
    float: left;
    background: lightgray;   
    margin: 15px;
}

jsfiddle

, , , .

+5

, , . http://jsfiddle.net/H9Ypc/ div css

.action-container{ display:inline-block; margin-bottom: 5px; }

float.

+1

More articles:


All Articles