Question

说我有一张带有标签的表

<table class="table rep-cal-table">
    <thead>
        <tr>
            <th>Monday</th>
        </tr>
    </thead>
    <tbody>
        <td>    
            <span class="label label-default label-cal"> Test </span>
        </td>
    </tbody>
</table>

并且标签的css是

.label-cal {
    display:block;
    margin:.3em;
  padding: .3em;
}

使用display：block，标签填充整个单元格。我如何选择只填充前半部分或后半部分（水平）？我尝试在列中定义宽度= 50％的div，但这不起作用。

Answer 1

您需要确保标签有display:block，因为某些css规则会覆盖您的CSS。我添加了!important并解决了问题。

＆＃13;

.label-cal {
    display:block;
    margin:.3em;
    padding: .3em;
    width:50%;
}
span{
   display:block!important;
}

div{
  position:relative;
  display:block;
  width:100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="root">
  <table class="table rep-cal-table">
    <thead>
        <tr>
            <th>Monday</th>
        </tr>
    </thead>
    <tbody>
        <td>    
            <span class="label label-default label-cal"> Test </span>
        </td>
    </tbody>
</table>
</div>

＆＃13;

Answer 2

请检查这个。它的宽度：50％，但你需要在表格中添加宽度

<table class="table rep-cal-table">
<thead>
    <tr>
        <th>Monday</th>
    </tr>
</thead>
<tbody>
    <td>    
        <span class="label label-default label-cal"> Test </span>
    </td>
</tbody>

.label-cal {  width:50%;
display:block;margin:.3em;  padding: .3em;border:1px #f00 solid;}table{border:1px #f00 solid; width:400px;}

引导标签显示：阻止 - 只填充表格单元格的一半？

2 个答案: