div内部的对齐问题

Question

我在对齐div中的元素时遇到问题.

我想要这样的东西

|-----------------------------------------------|
|<P>   | <input type = text> | imagebutton here |
|here  |  here               |                  |
|-----------------------------------------------|

但我得到类似的东西

|-----------------------------------------------|
|<P>   |                                        |
|here  |                                        |
|       <input type = text>  |                  |
|        here                |                  |
|                             imagebutton here  |
|-----------------------------------------------|

所以有一些问题使得下一个元素div显示在当前元素下面,即如果我可以<input> 水平对齐<p>,我认为这将给出解决方案.

以下是我的尝试:

css部分

.imagewrapper{
    display: table-cell;
    background-color:yellow;
    margin-left: 70%;
    width: 25%;
    margin-bottom: 10%;
    height: 35%;
}
.textwrapper{
    display: table-cell;
    background-color:blue;
    margin-left: 30%;
    width: 40%;
    margin-bottom: 10%;
    height: 35%;
}

.msg_wrapper{
    display: table-cell;
    background-color:lime;
    margin-left:5%;
    width: 25%;
    margin-bottom: 10%;
}

HTML方面

<div id="searchClass">
<p class="msg_wrapper"><b>Class</b></p>
<input id="txt_class"   style="background-color: Aqua; class = textwrapper >
<input type="image" id="searchclassimg" class="imagewrapper" src="./resource/search-button.png">
</div>

Answer 1

试试这个HTML:

        <div id="searchClass">
          <p class="msg_wrapper"><b>Class</b></p>
          <input style="background-color: Aqua; width:25%; float:left; margin:0 0 0 1%; class = textwrapper" id="txt_class">
          <input type="image" id="searchclassimg" class="imagewrapper" src="./resource/search-button.png">
        </div>

或CSs代码如下:

<style>    
    .imagewrapper {
        display: table-cell;
        background-color: yellow;
        margin-left: 1%;
        width: 25%;
        margin-bottom: 10%;
        height: 35%;
    }
    .textwrapper {
        display: table-cell;
        background-color: blue;
        margin-left: 30%;
        width: 40%;
        margin-bottom: 10%;
        height: 35%;
        float: left;
    }
    .msg_wrapper {
        display: table-cell;
        background-color: lime;
        margin-left: 5%;
        width: 25%;
        margin-bottom: 10%;
        float: left;
    }
</style>