Question

我想做以下事情：

IMG INPUT TEXT INPUT TEXT SUBMIT

它全部集中在一起，所以我不能简单地使用浮动。我只有：

<img src="lws_img.gif" />
<form>
    <input type="text" placeholder="1" name="1" />
    <input type="text" placeholder="2" name="2" />
    <input type="submit" />
</form>

此外，所有输入文本+按钮必须与图像一样高。

Answer 1

使用它：

demo

<强> HTML

<form>
    <img src="lws_img.gif" />
    <input type="text" placeholder="1" name="1" />
    <input type="text" placeholder="2" name="2" />
    <input type="submit" />
</form>

<强> CSS

form{ text-align:center }
form img, form input{
    display:inline-block;
}

Answer 2

像this

这样的东西

CSS：

.centerIt { text-align:center; } 
img,form,input { display:inline; }

Answer 3

display:table也是一种解决方案

演示： http://jsfiddle.net/sS8HB/3/ 热门对齐

演示2： http://jsfiddle.net/sS8HB/4/ 中心对齐

<强> CSS

.master{
    display:table;
}
.img,.frm{
    display:table-cell;
    vertical-align:top; /* for top aligned */
    /*vertical-align:middle; /* for middle aligned */
}

<强> HTML

<div class="master">
    <div class="img">
        <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
    </div>
    <div class="frm">
        <form>
            <input type="text" placeholder="1" name="1" />
            <input type="text" placeholder="2" name="2" />
            <input type="submit" />
        </form>
    </div>

如何在img旁边放置表单？

3 个答案: