Question

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

我想要这样的东西

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

但我得到像

这样的东西

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

因此，有一些问题会导致div中的下一个元素显示在当前元素下方，即如果我可以将<input>水平对齐到<p>，我认为这会给出解决方案。

以下是我的尝试：

css part

.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 side

<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>

OR 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>

Answer 2

嘿接受这个例子。

enter image description here

<html>
 <head>
  <title></title>
  <style type="text/css">        
   #tablecellexamples div { border:1px solid black; width:130px; background-color:#eee }
  </style>
 </head>
 <body>
  <div id="tablecellexamples">          
   <div style="display:table-row">   
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus dignissim ipsum a dignissim. Proin mattis orci sit amet quam feugiat lobortis.
    </div>
    <div style="display:table-cell; vertical-align:top">Top aligned</div>
    <div style="display:table-cell; vertical-align:middle">Center aligned</div>
    <div style="display:table-cell; vertical-align:bottom">Bottom aligned</div>
   </div>
  </div>
 </body>
</html>

Answer 3

您的HTML不正确（缺少结束语句）在此行中已更正：

<input id="txt_class" class="textwrapper">

你应该使用你的css规则添加Aqua颜色，取代Blue。

您可以使包装器div表现为（包含）行：

#searchClass {
    display: table-row;
}

然后，您需要调整边距。

就我个人而言，我会删除所有边距，高度等设置，并在没有这些设置的情况下首先查看它的外观。

div内部的对齐问题

3 个答案: