Question

如何垂直对齐td，使其看起来如下，文本框将位于＆＃34; aaaa：＆＃34;旁边。并且也与它水平对齐？

enter code here

Answer 1

请检查以下代码及其输出，我有点困惑你真正想要的但我想其中一个会帮助你！

    

    <table style="width: 100%;display:table-cell;" border="0">
                <tr valign="top" >
                    <td style="width: 50px" align="right">And<br /> And</td>
                    <td style="display:block; margin-left:10px; margin-bottom:70px"> 
                        aaaaaaaaaaaaaaaaaaaaa:
                        <br />
                         bbbbbbbbbbbbbbbbbb
                        <br />
                         cccccccccccccccccccc
                    </td>
                    <td>
                        <table border="0">
                            <tr>
                                <td>
                                    <input type="text" name="lname">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>  
<br>
<br>

        <div style="display:  flex;align-items:  center;
">
                <div style="width: 50px" align="right">And<br /> And</div>
                <div style="display:block; margin-left:20px;"> 
                    aaaaaaaaaaaaaaaaaaaaa:
                    <br />
                     bbbbbbbbbbbbbbbbbb
                    <br />
                     cccccccccccccccccccc
                </div>
                <div>
                                <input type="text" name="lname">
                </div>
        </div>

Answer 2

试试这个

pandas

Answer 3

尝试一下，看看那是你之后的......我认为你错过了div，container包裹了所有行。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row top-buffer">
    <div class="col-md-12">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA:</div>
  </div>


  <div class="row no-margin">
    <div class="col-md-2"></div>
    <div class="col-md-5 ">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB:</div>
    <input style="margin-top:-5px" type="text" />
  </div>

  <div class="row no-margin">
    <div class="col-md-2 text-right">And</div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>


  <div class="row no-margin">
    <div class="col-md-2"></div>
    <div class="col-md-5">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
  </div>
  <div class="row no-margin">
    <div class="col-6 col-md-2 text-right">And</div>
    <div class="col-6 col-md-2"></div>
    <div class="col-6 col-md-2"></div>
  </div>
  <div class="row no-margin">
    <div class="col-md-2"></div>
    <div class="col-md-4">DDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
  </div>
</div>

＆＃13;

Answer 4

我认为这就是你所需要的：

<div class="container">
        <div class="row">
          <div class="col-sm-4">
            <label>A</label>
          </div>
          <div class="col-sm-4  col-xs-4">
            <div class="col-xs-2">
            <input type="text">
          </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <label>A  </label>
          </div>
          <div class="col-sm-4 col-xs-4 ">
            <div class="col-xs-2">

            <input type="text">

            </div>
          </div>
        </div>
      </div>

调整uotput窗口大小检查： https://jsfiddle.net/3q3egbqs/

如何垂直对齐列，以使相邻的行不会彼此对齐

4 个答案: