发表新帖
发表新帖

Is such alignment achievable without ?
后端 未结
关注
5 1097
攒了一身酷
攒了一身酷 2021-01-17 11:57

\"The

My goal is an alignment as shown in the attached image (the fields on the left may have a

相关标签:
5条回答
  • 清歌不尽
    2021-01-17 12:32

    While it is possible to achieve the same with tables, it would be considered semantically incorrect to use a table for the purpose of layout. Especially since you can achieve the same using just a line or two of CSS.

    Give your labels a fixed width (something larger than your longest label text).

    <style>
label {
    width: 100px;
    display: inline-block;
}​
</style>

<label>Name</label>
<input type="text" />
<br/>
<label>Email Address</label>
<input type="text" />​

    Example

    0 讨论(0)
  • 南笙
    2021-01-17 12:37

    I found a much easier way to do this by accident. Say you have the following: 

    <div class='top'>
  <div>Something else</div>
  <div class='a'>
    <div>Some text 1</div>
    <div>Some text 2</div>
  </div>
  <div class='a'>
    <div>Some text 3</div>
    <div>Some text 4</div>
  </div>
</div>

    You can align Some text 1 and Some text 2 using css table display styling like this:

    .a {
  display: table-row;
}
.a div {
  display: table-cell;
}

    The coolest thing is that as long as the 'top' div is NOT styled display: table, then other things like "Something else" can be ignored in terms of alignment. If the 'top' div IS styled display: table, then "Some text 1" will be aligned with "Something else" (ie it treats all its children like table rows, even if they have a different display style).

    This works in Chrome, not sure if its supposed to behave this way, but I'm glad it works.

      .a {
      display: table-row;
    }
    .a div {
      display: table-cell;
    }
       <div class='top'>
      <div>Something else</div>
      <div class='a'>
        <div>Some text 1</div>
        <div>Some text 2</div>
      </div>
      <div class='a'>
        <div>Some text 3</div>
        <div>Some text 4</div>
      </div>
    </div>

    0 讨论(0)
  • 有刺的猬
    2021-01-17 12:52

    Here, you could use this for getting the output required.

    Using tables IMO is not bad practice, in fact they should be used where tabular data is required, or the format of data resembles a table.

    However, designing a full page, or anything not to be displayed in a tabular format, using a table is discouraged, and is in fact very very wrong. Here goes a sample using a non-table structure:

    HTML : 

    <form>
    <label for="name">Email: </label><input id="name" type="email" placeholder="@" />
    <br/><br />
    <label>Password: </label><input type="password" id="password"  placeholder="*"/>
</form>

    CSS: 

    label {
    width: 80px;
    display: block;
    vertical-align: middle;
    float:left;
    clear:left;
}
input {
    border-top-left-radius:5px;
    border-bottom-right-radius: 10px;
    background: #141414;
    color: #fdd56c;
    outline: none;
}

    Here is an example

    0 讨论(0)
  • 孤城傲影
    2021-01-17 12:52

    Yes, such alignment is possible. Using CSS classes, you can markup your HTML in such a way to achieve the same look of a table without the headache of using a table (or making the markup look ugly).

    Using this CSS:

    .label {
    display: inline-block;
    width: 100px;
}

.inputBox {
    width: 200px;
}

    and this HTML:

    <span class="label">E-mail:</span><input type="email"></input><br>
<span class="label">Password:</span><input type="text"></input>

    you'll get the layout you want.

    To do this with IE7 support, change the CSS above to this:

    .label {
    display: block;
    width: 100px;
    float: left;
    clear: left;
}

    Then, add this line below the lines already shown:

    <div style="clear: left"></div>

    Example using IE7-compatible settings: http://jsfiddle.net/bbXXp/

    0 讨论(0)
  • 小鲜肉
    2021-01-17 12:52

    True. I am learning it the hard way. I used table for alignment, and now, certain alignments are becoming bizzare in smaller screens (e.g. mobile phone, tablets etc). Hence, am switching over to div. Preferable use <div style="display:inline-block">...</div>, which will align automatically if the screen is smaller. Hence, my advice is that Table should be used only for genuine tables, and not for aligning controls in a body.

    0 讨论(0)
 看不清?
提交回复
热议问题