Làm thế nào để phân phối đều các phần tử trong một div bên cạnh nhau?

Điều này có nghĩa là cho một menu.
Ví dụ, tôi có một phần tử div với 3 nhịp trong đó, tất cả đều có một số lề, chiều rộng tối đa và số nổi (trái hoặc phải).
Nó được định vị bắt đầu từ phía bên trái và như thế này:
[[span1][span2][span3] - lots of free space here].
Tôi muốn làm cho nó giống như thế này:
[[span1] - space - [span2] - space - [span3]]
Làm cách nào để làm điều này bằng cách sử dụng CSS? Tôi hơi nghi ngờ điều đó là không thể.
Lưu ý rằng tôi muốn nó giữ nguyên kiểu khi tôi thêm hoặc xóa một mục menu.
HTML:

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS:

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

Trong 'ngày xưa', bạn sẽ sử dụng một bảng và các mục menu của bạn sẽ được cách đều nhau mà không cần phải trình bày rõ ràng chiều rộng cho số lượng mục.

Nếu đó không phải là IE 6 và 7 (nếu điều đó đáng lo ngại) thì bạn có thể làm tương tự trong CSS.

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS:

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

Mà không cần phải điều chỉnh cho số lượng mặt hàng.

Ví dụ không có table-layout:fixed- các ô được phân bố đều trên toàn bộ chiều rộng, nhưng chúng không nhất thiết phải có kích thước bằng nhau vì chiều rộng của chúng được xác định bởi nội dung của chúng.

• http://jsfiddle.net/w3dx/ULQwf/

Ví dụ với table-layout:fixed- các ô có kích thước bằng nhau, bất kể nội dung của chúng. (Cảm ơn @DavidHerse trong nhận xét cho phần bổ sung này.)

• http://jsfiddle.net/kqHWM/

Nếu bạn muốn các phần tử menu đầu tiên và cuối cùng được căn đều trái và phải, thì bạn có thể thêm CSS sau:

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

Bạn có thể sử dụng justify.

Điều này tương tự với các câu trả lời khác, ngoại trừ việc các phần tử ngoài cùng bên trái và bên phải sẽ nằm ở các cạnh thay vì cách đều nhau - [a ... b ... c thay vì .a..b..c.]

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

Một điều cần lưu ý là bạn phải để khoảng cách giữa mỗi phần tử. [Xem trò đùa.]

Có hai lý do để đặt các mục menu thành khối nội tuyến:

1. Nếu phần tử là theo mặc định, một mục cấp khối (chẳng hạn như an <li>), thì màn hình phải được đặt thành nội tuyến hoặc khối nội tuyến để ở trên cùng một dòng.
2. Nếu phần tử có nhiều hơn một từ ( <span>click here</span>), mỗi từ sẽ được phân phối đồng đều khi được đặt thành nội tuyến, nhưng chỉ các phần tử sẽ được phân phối khi được đặt thành khối nội tuyến.

Xem JSFiddle

CHỈNH SỬA:
Bây giờ flexbox đã hỗ trợ rộng rãi (tất cả không phải IE và IE 10+), có một "cách tốt hơn".
Giả sử cấu trúc phần tử giống như trên, tất cả những gì bạn cần là:

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

Nếu bạn muốn các phần tử bên ngoài cũng có khoảng cách, chỉ cần chuyển không gian giữa sang không gian xung quanh.
Xem JSFiddle

Nếu ai đó muốn thử một cách tiếp cận hơi khác, họ có thể sử dụng FLEX.

HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

Đây là fiddle: http://jsfiddle.net/ynemh3c2/ (Hãy thử thêm / bớt div)

Đây là nơi tôi đã tìm hiểu về điều này: https://css-tricks.com/snippets/css/a-guide- to-flexbox /

justify-content: space-betweenvà display: flexlà tất cả những gì chúng tôi cần, nhưng cảm ơn @Pratul đã truyền cảm hứng!

Đây là cách nhanh chóng và dễ dàng để làm điều đó

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

css

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

Sau đó điều chỉnh widthcủaspan s cho số mà bạn có.

Ví dụ: http://jsfiddle.net/jasongennaro/wvJxD/

Bạn chỉ cần hiển thị div với id #menulà vùng chứa flex như thế này:

#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}

Tôi đã quản lý để làm điều đó với tổ hợp css sau:

text-align: justify;
text-align-last: justify;
text-justify: inter-word;

Tạo tất cả các nhịp được sử dụng các phần tử khối nội tuyến. Tạo một khoảng kéo dài trống với chiều rộng 100% bên dưới danh sách các nhịp chứa các mục menu. Tiếp theo, tạo div chứa các nhịp text-align: justified. Sau đó, điều này sẽ buộc các phần tử khối nội tuyến [các mục menu của bạn] phân phối đồng đều.

https://jsfiddle.net/freedawirl/bh0eadzz/3/

  <div id="container">

          <div class="social">
            <a href="#" target="_blank" aria-label="facebook-link">
            <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="twitter-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="youtube-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="pinterest-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="snapchat-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="blog-link">
                 <img src="http://placehold.it/40x40">
            </a>

            <a href="#" aria-label="phone-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <span class="stretch"></span>
          </div>
             </div>