股利行除了第一个

HTML代码都一样：股利行除了第一个

<div ng-repeat="characteristic in test.testChar" class="row" > 
<div class="col-xs-9 rec"> 
<div class="rec2" ng-bind-html="translateCharacteristicLabel('test',test.testChar[$index + 1].cell_header) | to_trusted"></div> 
</div>   
</div>

CSS：

.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    padding: 5px; 
    width: 100%; 
} 
.rec{ 
    font-size: 16px !important; 
    text-transform: uppercase; 
    display: inline-block; 
    white-space: nowrap; 
    margin-left: 50%; 
    clear: left; 
} 
.rec2{ 
    font-size: 16px !important; 
    text-transform: uppercase; 
    display: inline-block; 
    white-space: nowrap; 
    clear: left; 
}

有了上面的代码，我能够创建低于设计：

正如你所看到的TYPE文本略低于其余的。我怎样才能让这一切都保持一致？（在所有在一行中）

来源

2017-07-17 CloudSeph

您可以添加获取呈现实际的HTML？ –

您可以使用父容器的CSS属性text-align:center; line-heigth: 16px;应该做的修复

来源

2017-07-17 07:13:54 Svidlak

如果我没有记错的话，你只需要添加：

justify-content: center;

到行。如果不工作，你可以尝试

height: 100%; 
display: inline-block; 
vertical-align: middle;

在REC2元素

这将有助于如果你能做出的jsfiddle/codepen一个简单的例子，以便其他人可以尝试一下你的代码更容易

编辑：

你也可以节省代码行，一次与界定既REC和REC2，像这样：

.rec, .rec2 { 
    font-size: 16px !important; 
    text-transform: uppercase; 
    display: inline-block; 
    white-space: nowrap; 
    clear: left; 
}

，然后添加为REC保证金：

.rec { 
    margin-left: 50%; 
}

来源

2017-07-17 07:19:50

股利行除了第一个

回答

相关问题