wie man Elemente in einer Zeile in css hält

Question

Ich versuche, die Elemente in der Kopfzeile in einer Zeile zu halten. Meine aktuellen Stile funktionieren, aber ein Problem ist, wenn ich meinen Browser kleiner machen oder quetschen Sie es (von rechts nach links) dann an einem Punkt der Suche Element geht in die zweite Zeile oder erscheinen unter der ersten Zeile (die Menü-Zeile ist). Und wenn ich es mehr kleiner dann ganze Menü div Tag geht in die zweite Zeile und erscheint unter dem Logo.

Was ich will, ist, wenn ich meinen Browser kleiner mache, dann sollten alle diese Elemente in der gleichen Zeile bleiben. Wie kann ich dies tun?

Hier ist mein Code

.header
.logo
.menu
    %ul
        %li
            %a{:href => '#', :rel => 'first'} Home
        %li
            %a{:href => '#', :rel => 'first'} Features
        %li
            %a{:href => '#', :rel => 'first'} Pricing
        %li
            %a{:href => '#', :rel => 'first'} Team
        %li
            %a{:href => '#', :rel => 'first'} Support
        %a{:href => '#', :rel => 'first'}
            %li.last Sign up for beta   
        .clear
.search
    %input{:type => 'text', :name => 'search'}
.clear

hier ist scss

.header-container {
width: 100%;
height: 100px;
}

.clear { clear: both; }

.header-container {
width: 100%;
background: url(menu-bg.jpg) no-repeat;
background-size: 100%;

.header {
    padding: 30px 100px;
    width: 68%;
    margin: 0 auto;

    .logo {
        width: 122px; height: 31px;
        margin-right: 10px;
        float: left;
        background: url(logo.png) no-repeat;
    }

    .menu {
        min-width: 500px;
        float: left;

        ul {
            line-height: 5px;
            list-style-type: none;

            li {
                float: left;
                margin-right: 25px;

                a {
                    color: #ffffff;
                    text-decoration: none;
                    font-size: 16px;
                }

                a:hover {
                    background: url(selected.jpg) no-repeat;
                }

                &.last {
                    color: #ffffff;
                    width: 148px; height: 38px;
                    margin-top: -16px;
                    padding: 16px 18px;
                    background: url(buttonbg.jpg) no-repeat;
                }
            }

        }
    }

    .search {

        input {
            width: 200px;
            float: right;
            padding: 5px;
            color: #ffffff;
            background-color: #2c3338;
            border: 1px solid #2c3338;
            background: url(search.png) no-repeat 98%;

        }

    }
}
}

Answer 1

Mindestbreite anwenden auf body Tag und hoffen, dass das Problem damit gelöst ist.

body
{
   min-width:1000px;
}

Answer 2

Sie haben mehrere Möglichkeiten:

1. Einstellen min-width über die body .
2. Verwenden Sie ein flüssiges Layout.

Ich würde mich für Ersteres entscheiden, da Letzteres etwas altmodisch ist.