Yii2:如何正确包装标签内容,这是溢出边框

时间:2014-11-29 15:07:44

标签: jquery twitter-bootstrap-3 yii2

我正在使用yii2 jui小部件而不做任何修改。但包装标签窗口小部件的边框未正确呈现。见附图。

我试图将整个内容包装成一个带内联边框html的新div,如

<div style=style="border:1px solid black;"> tab contents</div>

但是这个自定义边框只是与“入场日期套餐”标签下方的边框重叠。

JUI Tabs widget

相关的CSS代码如下:

    <div id="w1-tab0" aria-labelledby="ui-id-1" class="ui-tabs-panel 
ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">
<div class="col-lg-6"><div class="form-group field-patientdetail-admission_date">

*:before, *:after {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
.ui-tabs .ui-tabs-panel {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-width: 0;
    display: block;
    padding: 1em 1.4em;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 4px;
}
.ui-widget-content {
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #ffffff;
    border: 1px solid #aaaaaa;
    color: #222222;
}
* {
    box-sizing: border-box;
}
.ui-widget-content {
    color: #222222;
}
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;

1 个答案:

答案 0 :(得分:1)

您可能正在使用float:left表单元素。这会使它们脱离标签的正常流程。您可以在这里查看问题的一些解决方案。 How do you keep parents of floated elements from collapsing?