Question

我在this jsfiddle面临一个问题的例子 - 我有一行包含两种不同类型的元素，一个h2标签，还有一个span标签。我将它们放在同一行中，希望它们看起来是水平的，但是，h2标签在屏幕上显示的位置低于span标签中的内容，导致元素位于不同行中的不希望的外观。

问题：是否有某种方法来包装或设置这些元素的样式以确保它们出现在同一级别？请注意，在我正在构建的应用程序中，有多个span标记。

<div class="grid-container outline">
    <div class="row">
        <div class="col-4">
            <h2>Hello</h2>

        </div>
        <div class="col-2">
            <span class="blah">blah</span>
        </div>
    </div>
</div>

CSS

    .grid-container {
        width: 100%;
        max-width: 1200px;
    }
    /*-- our cleafix hack -- */
    .row:before, .row:after {
        content:"";
        display: table;
        clear:both;
    }
    [class*='col-'] {
        float: left;
        min-height: 1px;
        width: 16.66%;
        /*-- our gutter -- */
        padding: 12px;

    }
    .col-1 {
        width: 16.66%;
    }
    .col-2 {
        width: 33.33%;
    }
    .col-3 {
        width: 50%;
    }
    .col-4 {
        width: 66.66%;
    }
    .col-5 {
        width: 83.33%;
    }
    .col-6 {
        width: 100%;
    }
    .outline, .outline * {
        outline: 1px solid #F6A1A1;
    }
    /*-- some extra column content styling --*/
    [class*='col-'] > p {

        padding: 0;
        margin: 0;
        text-align: center;
        color: white;
    }
div {
    box-sizing:border-box;
}

Answer 1

由于h2上的边距，h2和span元素出现在不同的水平。要删除它，只需添加：

  h2{
    margin:0px;
    }

之后，如果你增加跨度的字体大小以匹配H2，它们应该显示为水平。

有一个名为flexbox的CSS属性，可以更容易地垂直或水平地分隔HTML元素。 CSS技巧有一篇关于这个主题的综合文章。

使用本文中提到的技术：http://learnlayout.com/flexbox.html，我已将下面的CSS类添加到h2和span的父div中。

.vertical-container {

 height: 60px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

JS在这里：https://jsfiddle.net/bggwoecx/5/

Answer 2

组合线高和高度可能会为您解决此问题。试试下面的CSS。 PS：把你的排水沟从课堂上移到了一排。

.grid-container {
        width: 100%;
        max-width: 1200px;
    }
    /*-- our cleafix hack -- */
    .row:before, .row:after {
        content:"";
        display: table;
        clear:both;
        height:30px;
        padding:12px;
    }
    [class*='col-'] {
        float: left;
        min-height: 1px;
        width: 16.66%;
        /*-- our gutter -- */
        /*padding: 12px;*/

    }
    .col-1 {
        width: 16.66%;
    }
    .col-2 {
        width: 33.33%;
        line-height:30px;
        height:30px;
    }
    .col-3 {
        width: 50%;
    }
    .col-4 {
        width: 66.66%;
        line-height:30px;
    }
    .col-5 {
        width: 83.33%;
    }
    .col-6 {
        width: 100%;
    }
    .outline, .outline * {
        outline: 1px solid #F6A1A1;
    }
    /*-- some extra column content styling --*/
    [class*='col-'] > p {

        padding: 0;
        margin: 0;
        text-align: center;
        color: white;
    }
div {
    box-sizing:border-box;
}

h2{
    margin:0px;
    padding:0px;
}

如何确保连续的不同html元素是水平的？

2 个答案: