Отображение кнопок в различной форме рядом

Question

Отображение кнопок в различной форме рядом

0

У меня есть следующий код.

<fieldset class=last>
     <button>Refresh</button>
     <button> Clear</button>
</fieldset>
<form method="POST" action="*******">
     <button> Download</button>
</form>

Я хочу, чтобы все три кнопки отображались бок о бок. Теперь кнопка downloadd отображается ниже кнопок обновления и очистки. Как я могу это сделать? Вот FIDDLE

JavaBeginner 17 апр. 2014, в 12:43

Источник

Теги:

html

css

2 ответа

3

Вы можете использовать css для этого. Просто выберите <fieldset> и <form> и дайте ему inline-block как в демо.

fieldset, form {display:inline-block;}

DEMO (ваш FIDDLE, но обновленный Css)

C Travel 17 апр. 2014, в 07:40

Ещё вопросы

Jeevan · Accepted Answer · 2014-04-17T07-44-00.000Z

В дополнение к ответу "C Travel", если вы хотите сохранить границу и добавить поддержку для IE7, вы можете сделать это:

HTML

<div id="container">
    <fieldset class=last id="one">
        <button>Refresh</button>
        <button> Clear</button>
    </fieldset>
        <form method="POST" action="*******" id="two">
        <button> Download</button>
    </form>
    <div id="clearer"></div>
</div>

CSS

#one, #two{
    display: inline-block;
    *display: inline;
    zoom: 1;
    border: 0;
}

#container{
    border: 1px solid #000;
}

FIDDLE

Или используйте поплавки для еще более широкой поддержки:

#one, #two{
    float: left;
    border: 0;
    padding: 10px;
}

#clearer{
    clear: both;
}

#container{
    border: 1px solid #000;
}

FIDDLE