将文字移至标签底部而不更改HTML

时间：2015-08-22 03:17:29

标签： jquery html css tabs sharepoint-2010

我需要将单行文本移动到选项卡的底部。当选项卡只有一行文本时，文本现在位于顶部。我需要将它移到底部并且遇到麻烦，基于HTML层次结构，找到有效的CSS。这个CSS可以完全改变，但是这个HTML代码不能改变。我们希望标签为现在的宽度，122px，最小高度为40px。所有标签需要至少40px高，但可以更高。

我使用的是IE9和SharePoint 2010，因此它是动态的，IE9限制了我可以使用的代码。因为选项卡不是静态的，所以我必须将每个选项卡视为一行文本或多行文本。代码需要在所有选项卡上工作，无论它是一行，两行，三行等等。

我尝试在jQuery中执行此操作，但它不起作用：http://jsfiddle.net/Lance_Bitner/d7a2st79/

＆＃13;
＆＃13; 
.ui-tabs{
    background: none;
    margin-top:25px;
    padding:0px;
    border:0px transparent none;


}
.ui-tabs .ui-tabs-nav {
    background:rgb(106, 134, 156);
    padding:10px 0px 0px 13px;
    /*border-top:1px #b5c3cc solid;*/
}
.ui-tabs .ui-tabs-nav li{
border-radius: 0px;
 margin-bottom: -2px;
}
.ui-tabs .ui-tabs-nav li a{
    font-family:"Cabin", Arial;
    font-size:13px;
    font-weight:bold;
    background:rgb(95, 120, 140);
    color:#ffffff;
    width:120px;
    text-align:center;
    padding:1px 0px 7px 0px;
    /*border:1px #a0aeb9 solid;*/

    white-space:normal;
    -ms-word-wrap: break-word;

}

.ui-tabs .ui-tabs-nav li a:hover{
    text-decoration:underline;
}
.ui-tabs .ui-tabs-nav li a:active{
    background:#ffffff;
    color:#1e3069;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a{
    background:#ffffff;
    color:#1e3069;
}


.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a{
}
.ui-tabs .ui-tabs-panel{
    background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    overflow:hidden;
    padding:20px 20px 20px 20px;
    clear:both;
    border:0px transparent none;
    border-top:2px #cccccc solid;
    /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/

}

.ui-tabs-nav
{
    border-radius: 0px;
}

.ui-tabs ul.ui-widget-header
{
    border-bottom: 0px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
    border-bottom-color: #ffffff;
}

.ui-tabs .ui-tabs-nav li
{
    border: 0;
    display: table-cell;
    height: 100%;
    float: none;
    background-color: rgb(106, 134, 156);
    padding: 0px;
    margin: 0px 0px -2px 0px;
}

.ui-tabs .ui-tabs-nav li a
{
    padding: 7px 0 9px 0;
    border: 1px solid #cccccc;
    border-bottom-width: 2px;
    margin-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a
{
    border-bottom: 2px solid #ffffff;
}

.ui-tabs .ui-tabs-nav
{
    margin-bottom: -2px;
/*  display:table;*/
    border-spacing: 5px 0px;
    padding-left: 0px;
    padding-top: 5px;
/*  width: 100%;*/
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
    padding: 0px;
    margin: 0px 0px -2px 0px;
}
/*tabs*/

.tabs .tab-nav .active a {
background-attachment: scroll;
background-clip: border-box;    
background-color: rgb(255,255,255);
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ccc;
border-left-style:solid;
border-left-width: 0px;
border-right-color:#ccc;
border-right-style:solid;
border-right-width: 0px;
border-top-color: #ccc;
border-top-style:solid;
border-top-width:0px;
color:#1e3069;
margin-bottom:-2px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 7px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 9px;
}

ol ul
{
list-style-image:none;
list-style-position:outside;
list-style-type: none;  
}

.tabs tab-nav a{
    width:120px;
    text-align: center;
    position:relative;
 }
a{

    text-decoration:none;
}

.tabs ul
{
    margin-top:-25px;
    background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    overflow:hidden;
    clear:both;
    border:0px transparent none;
    border-top:2px #cccccc solid;
    /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/
    background:rgb(106, 134, 156);

    padding:10px 0px 0px 13px;


}

.tabs ul li
{
    display: inline;
    margin: 0px;
    margin-right: 2px;/*distance between tabs*/
    font: normal 12px Verdana;
}

.tabs ul li a 
{
    font-family:"Cabin", Arial;
    font-size:13px;
    font-weight:bold;
    background:rgb(95, 120, 140);
    color:#ffffff;
    width:120px;
    text-align:center;
    padding:1px 0px 7px 0px;
    border:1px #a0aeb9 solid;
    white-space:normal;
    -ms-word-wrap: break-word;

}


.tabs ul li a:hover
{
    text-decoration: underline;
    color: rgb(95, 120, 140); 
    background:white;
}

.tabs ul li.selected a
{
    position: relative;
    top: 0px;
    font-weight:bold;
    background: #FFF;
    border: 1px solid #AAA;
    border-bottom: 1px solid #FFF;
    color: #000;
}


.tabs ul li.selected a:hover, .tabs ul li.selected a:hover
{
    text-decoration: none;
}

div.tabs
{
    border: 0px solid #CCC; padding: 0px;
    border-top-color:#AAA;
    background-color:#FFF;
    border-radius: 0 0 0px 0px;


}
.tabs .tabs li a:active{
    background:#ffffff;
    color:#1e3069;
}
.home .tabs .tab-container{
    background-attachment:scroll;
    background-clip: border-box;
    background-color:transparent;
    background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    background-origin: padding-box;
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat:no-repeat;
    background-size:auto;
    border-bottom-color: currentColor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: currentColor;
    border-left-style:none;
    border-left-width: 0px;
    border-right-color: currentColor;
    border-right-style:none;
    border-right-width: 0px;
    border-top-color: #cccccc;
    border-top-style:solid;
    border-top-width: 2px;
    clear: both;
    color:#333;
    font-family:"Arial";
    font-size:100%;
    line-height: 17px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color:invert;
    outline-style: none;
    outline-width: 0px;
    overflow: hidden;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    vertical-align: baseline;

}

.tabs, .ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all
{

    border:0px;
    padding:0px;
    margin:0px;
}


/*tabs*/

.tabs .tab-nav .active a {
    background-attachment: scroll;
    background-clip: border-box;    
    background-color: rgb(255,255,255);
    background-image: none;
    background-origin: padding-box;
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat: repeat;
    background-size:auto;
    border-bottom-color: currentColor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: #ccc;
    border-left-style:solid;
    border-left-width: 0px;
    border-right-color:#ccc;
    border-right-style:solid;
    border-right-width: 0px;
    border-top-color: #ccc;
    border-top-style:solid;
    border-top-width:0px;
    color:#1e3069;
    margin-bottom:-2px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 7px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 9px;
}

ol ul
{
    list-style-image:none;
    list-style-position:outside;
    list-style-type: none;  
}

.tabs tab-nav a{
    width:120px;
    text-align: center;
    position:relative;
}
a{

    text-decoration:none;
}

.tabs ul
{
    margin-top:-25px;
    background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    overflow:hidden;
    clear:both;
    border:0px transparent none;
    border-top:2px #cccccc solid;
    /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/
    background:rgb(106, 134, 156);
    padding:10px 0px 0px 13px;

}

.tabs ul li
{
    display: inline;
    margin: 0px;
    margin-right: 2px;/*distance between tabs*/
    font: normal 12px Verdana;
}

.tabs ul li a 
{
    font-family:"Cabin", Arial;
    font-size:13px;
    font-weight:bold;
    background:rgb(95, 120, 140);
    color:#ffffff;
    width:120px;
    text-align:center;
    padding:1px 0px 7px 0px;
    border:1px #a0aeb9 solid;
    white-space:normal;
    -ms-word-wrap: break-word;
}


.tabs ul li a:hover
{
    text-decoration: underline;
    color: rgb(95, 120, 140); 
    background:white;
}

.tabs ul li.selected a
{
    position: relative;
    top: 0px;
    font-weight:bold;
    background: #FFF;
    border: 1px solid #AAA;
    border-bottom: 1px solid #FFF;
    color: #000;
}


.tabs ul li.selected a:hover, .tabs ul li.selected a:hover
{
    text-decoration: none;
}

div.tabs
{
    border: 0px solid #CCC; padding: 0px;
    border-top-color:#AAA;
    background-color:#FFF;
    border-radius: 0 0 0px 0px;
}
.tabs .tabs li a:active{
    background:#ffffff;
    color:#1e3069;
}
.home .tabs .tab-container{
    background-attachment:scroll;
    background-clip: border-box;
    background-color:transparent;
    background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    background-origin: padding-box;
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat:no-repeat;
    background-size:auto;
    border-bottom-color: currentColor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: currentColor;
    border-left-style:none;
    border-left-width: 0px;
    border-right-color: currentColor;
    border-right-style:none;
    border-right-width: 0px;
    border-top-color: #cccccc;
    border-top-style:solid;
    border-top-width: 2px;
    clear: both;
    color:#333;
    font-family:"Arial";
    font-size:100%;
    line-height: 17px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color:invert;
    outline-style: none;
    outline-width: 0px;
    overflow: hidden;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    vertical-align: baseline;

}

.tabs, .ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all
{

    border:0px;
    padding:0px;
    margin:0px;
}


div.tabs {
    margin-left:-26px;
    /*margin-left:-45px;*/
    width:110%;
    /*width:115%;*/
    }

/* UL for TABS*/


div.ui-tabs ul > li {
    padding-left:0px;
    list-style-position:outside;
    list-style-type:disc;
    list-style:disc;
    line-height:28px;
    padding:0px;
    border:0px 0px 0px 0px;
    margin:0px 0px 0px 15px;
    display:list-item;
    vertical-align:text-bottom;
    }

div.ui-tabs ul ul  {
    padding-left:0px;
    list-style-position:outside;
    list-style:disc;
    list-style-type:disc;
    line-height:28px;
    letter-spacing:0px;
    padding:0px;
    border:0px;
    margin:0px 0px 0px 0px;
    text-indent:30px;
    display:list-item;

}

/*Tabs*/
div.ui-tabs .ui-tabs-nav li a {
    text-align:center;
    width:122px;
    border-left:0px;
    padding-left:0px;
    margin-left:5px;
    /*margin-left:0px;*/
    text-indent:0px;
    line-height:20px;
    border-left-color:silver;
    border-left-width:1px;
    border-left-style:solid;    

    }


div.ui-tabs-panel table{
    margin-left:15px;
    border-right-width:0px;
    border-color:transparent;
    border-right:0px;

}

div.ui-tabs-panel table td{
    padding:0 15px 0 0;

}

.ui-tabs .ui-tabs-panel{

    border:0px 0px 0px 0px;
    margin-right:75px;
    padding-left:40px;

}

.ui-tabs .ui-tabs-nav{
    margin-left:15px;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
	cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
div.ui-tabs .ui-tabs-nav li a{
	min-height:40px !important;
＆＃13; 
<div class="tabs contentTabs ui-tabs ui-widget ui-widget-content ui-corner-all"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"><li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabIndex="0" aria-labelledby="ui-id-1" aria-selected="true" aria-controls="tabs-1"><a id="ui-id-1" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-1">Initiatives and Services</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-2" aria-selected="false" aria-controls="tabs-2"><a id="ui-id-2" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-2">12345678912345678</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-3" aria-selected="false" aria-controls="tabs-3"><a id="ui-id-3" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-3">Latest Reports</a></li></ul>
<div aria-hidden="false" aria-expanded="true" id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-labelledby="ui-id-1">
​
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
$(function(){
    $('.ui-tabs-anchor').each(function(){
        $(this).html('<div>' + $(this).text() + '</div>');
    });
})
＆＃13; 
.ui-tabs{
    background: none;
    margin-top:25px;
    padding:0px;
    border:0px transparent none;


}
.ui-tabs .ui-tabs-nav {
    background:rgb(106, 134, 156);
    padding:10px 0px 0px 13px;
    /*border-top:1px #b5c3cc solid;*/
}
.ui-tabs .ui-tabs-nav li{
border-radius: 0px;
 margin-bottom: -2px;
}
.ui-tabs .ui-tabs-nav li a{
    font-family:"Cabin", Arial;
    font-size:13px;
    font-weight:bold;
    background:rgb(95, 120, 140);
    color:#ffffff;
    width:120px;
    text-align:center;
    padding:1px 0px 7px 0px;
    /*border:1px #a0aeb9 solid;*/

    white-space:normal;
    -ms-word-wrap: break-word;

}

.ui-tabs .ui-tabs-nav li a:hover{
    text-decoration:underline;
}
.ui-tabs .ui-tabs-nav li a:active{
    background:#ffffff;
    color:#1e3069;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a{
    background:#ffffff;
    color:#1e3069;
}


.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a{
}
.ui-tabs .ui-tabs-panel{
    background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    overflow:hidden;
    padding:20px 20px 20px 20px;
    clear:both;
    border:0px transparent none;
    border-top:2px #cccccc solid;
    /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/

}

.ui-tabs-nav
{
    border-radius: 0px;
}

.ui-tabs ul.ui-widget-header
{
    border-bottom: 0px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
    border-bottom-color: #ffffff;
}

.ui-tabs .ui-tabs-nav li
{
    border: 0;
    display: table-cell;
    height: 100%;
    float: none;
    background-color: rgb(106, 134, 156);
    padding: 0px;
    margin: 0px 0px -2px 0px;
}

.ui-tabs .ui-tabs-nav li a
{
    padding: 7px 0 9px 0;
    border: 1px solid #cccccc;
    border-bottom-width: 2px;
    margin-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a
{
    border-bottom: 2px solid #ffffff;
}

.ui-tabs .ui-tabs-nav
{
    margin-bottom: -2px;
/*  display:table;*/
    border-spacing: 5px 0px;
    padding-left: 0px;
    padding-top: 5px;
/*  width: 100%;*/
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
    padding: 0px;
    margin: 0px 0px -2px 0px;
}
/*tabs*/

.tabs .tab-nav .active a {
background-attachment: scroll;
background-clip: border-box;    
background-color: rgb(255,255,255);
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ccc;
border-left-style:solid;
border-left-width: 0px;
border-right-color:#ccc;
border-right-style:solid;
border-right-width: 0px;
border-top-color: #ccc;
border-top-style:solid;
border-top-width:0px;
color:#1e3069;
margin-bottom:-2px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 7px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 9px;
}

ol ul
{
list-style-image:none;
list-style-position:outside;
list-style-type: none;  
}

.tabs tab-nav a{
    width:120px;
    text-align: center;
    position:relative;
 }
a{

    text-decoration:none;
}

.tabs ul
{
    margin-top:-25px;
    background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    overflow:hidden;
    clear:both;
    border:0px transparent none;
    border-top:2px #cccccc solid;
    /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/
    background:rgb(106, 134, 156);

    padding:10px 0px 0px 13px;


}

.tabs ul li
{
    display: inline;
    margin: 0px;
    margin-right: 2px;/*distance between tabs*/
    font: normal 12px Verdana;
}

.tabs ul li a 
{
    font-family:"Cabin", Arial;
    font-size:13px;
    font-weight:bold;
    background:rgb(95, 120, 140);
    color:#ffffff;
    width:120px;
    text-align:center;
    padding:1px 0px 7px 0px;
    border:1px #a0aeb9 solid;
    white-space:normal;
    -ms-word-wrap: break-word;

}


.tabs ul li a:hover
{
    text-decoration: underline;
    color: rgb(95, 120, 140); 
    background:white;
}

.tabs ul li.selected a
{
    position: relative;
    top: 0px;
    font-weight:bold;
    background: #FFF;
    border: 1px solid #AAA;
    border-bottom: 1px solid #FFF;
    color: #000;
}


.tabs ul li.selected a:hover, .tabs ul li.selected a:hover
{
    text-decoration: none;
}

div.tabs
{
    border: 0px solid #CCC; padding: 0px;
    border-top-color:#AAA;
    background-color:#FFF;
    border-radius: 0 0 0px 0px;


}
.tabs .tabs li a:active{
    background:#ffffff;
    color:#1e3069;
}
.home .tabs .tab-container{
    background-attachment:scroll;
    background-clip: border-box;
    background-color:transparent;
    background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    background-origin: padding-box;
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat:no-repeat;
    background-size:auto;
    border-bottom-color: currentColor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: currentColor;
    border-left-style:none;
    border-left-width: 0px;
    border-right-color: currentColor;
    border-right-style:none;
    border-right-width: 0px;
    border-top-color: #cccccc;
    border-top-style:solid;
    border-top-width: 2px;
    clear: both;
    color:#333;
    font-family:"Arial";
    font-size:100%;
    line-height: 17px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color:invert;
    outline-style: none;
    outline-width: 0px;
    overflow: hidden;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    vertical-align: baseline;

}

.tabs, .ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all
{

    border:0px;
    padding:0px;
    margin:0px;
}


/*tabs*/

.tabs .tab-nav .active a {
    background-attachment: scroll;
    background-clip: border-box;    
    background-color: rgb(255,255,255);
    background-image: none;
    background-origin: padding-box;
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat: repeat;
    background-size:auto;
    border-bottom-color: currentColor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: #ccc;
    border-left-style:solid;
    border-left-width: 0px;
    border-right-color:#ccc;
    border-right-style:solid;
    border-right-width: 0px;
    border-top-color: #ccc;
    border-top-style:solid;
    border-top-width:0px;
    color:#1e3069;
    margin-bottom:-2px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 7px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 9px;
}

ol ul
{
    list-style-image:none;
    list-style-position:outside;
    list-style-type: none;  
}

.tabs tab-nav a{
    width:120px;
    text-align: center;
    position:relative;
}
a{

    text-decoration:none;
}

.tabs ul
{
    margin-top:-25px;
    background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    overflow:hidden;
    clear:both;
    border:0px transparent none;
    border-top:2px #cccccc solid;
    /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/
    background:rgb(106, 134, 156);
    padding:10px 0px 0px 13px;

}

.tabs ul li
{
    display: inline;
    margin: 0px;
    margin-right: 2px;/*distance between tabs*/
    font: normal 12px Verdana;
}

.tabs ul li a 
{
    font-family:"Cabin", Arial;
    font-size:13px;
    font-weight:bold;
    background:rgb(95, 120, 140);
    color:#ffffff;
    width:120px;
    text-align:center;
    padding:1px 0px 7px 0px;
    border:1px #a0aeb9 solid;
    white-space:normal;
    -ms-word-wrap: break-word;
}


.tabs ul li a:hover
{
    text-decoration: underline;
    color: rgb(95, 120, 140); 
    background:white;
}

.tabs ul li.selected a
{
    position: relative;
    top: 0px;
    font-weight:bold;
    background: #FFF;
    border: 1px solid #AAA;
    border-bottom: 1px solid #FFF;
    color: #000;
}


.tabs ul li.selected a:hover, .tabs ul li.selected a:hover
{
    text-decoration: none;
}

div.tabs
{
    border: 0px solid #CCC; padding: 0px;
    border-top-color:#AAA;
    background-color:#FFF;
    border-radius: 0 0 0px 0px;
}
.tabs .tabs li a:active{
    background:#ffffff;
    color:#1e3069;
}
.home .tabs .tab-container{
    background-attachment:scroll;
    background-clip: border-box;
    background-color:transparent;
    background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
    background-origin: padding-box;
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat:no-repeat;
    background-size:auto;
    border-bottom-color: currentColor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: currentColor;
    border-left-style:none;
    border-left-width: 0px;
    border-right-color: currentColor;
    border-right-style:none;
    border-right-width: 0px;
    border-top-color: #cccccc;
    border-top-style:solid;
    border-top-width: 2px;
    clear: both;
    color:#333;
    font-family:"Arial";
    font-size:100%;
    line-height: 17px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color:invert;
    outline-style: none;
    outline-width: 0px;
    overflow: hidden;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    vertical-align: baseline;

}

.tabs, .ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all
{

    border:0px;
    padding:0px;
    margin:0px;
}


div.tabs {
    margin-left:-26px;
    /*margin-left:-45px;*/
    width:110%;
    /*width:115%;*/
    }

/* UL for TABS*/


div.ui-tabs ul > li {
    padding-left:0px;
    list-style-position:outside;
    list-style-type:disc;
    list-style:disc;
    line-height:28px;
    padding:0px;
    border:0px 0px 0px 0px;
    margin:0px 0px 0px 15px;
    display:list-item;
    vertical-align:text-bottom;
    }

div.ui-tabs ul ul  {
    padding-left:0px;
    list-style-position:outside;
    list-style:disc;
    list-style-type:disc;
    line-height:28px;
    letter-spacing:0px;
    padding:0px;
    border:0px;
    margin:0px 0px 0px 0px;
    text-indent:30px;
    display:list-item;

}

/*Tabs*/
div.ui-tabs .ui-tabs-nav li a {
    text-align:center;
    width:122px;
    border-left:0px;
    padding-left:0px;
    margin-left:5px;
    /*margin-left:0px;*/
    text-indent:0px;
    line-height:20px;
    border-left-color:silver;
    border-left-width:1px;
    border-left-style:solid;    

    }


div.ui-tabs-panel table{
    margin-left:15px;
    border-right-width:0px;
    border-color:transparent;
    border-right:0px;

}

div.ui-tabs-panel table td{
    padding:0 15px 0 0;

}

.ui-tabs .ui-tabs-panel{

    border:0px 0px 0px 0px;
    margin-right:75px;
    padding-left:40px;

}

.ui-tabs .ui-tabs-nav{
    margin-left:15px;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
	cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
div.ui-tabs .ui-tabs-nav li a{
    min-height:40px !important;
    position: relative;
}
div.ui-tabs .ui-tabs-nav li a > div{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs contentTabs ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
        <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabIndex="0" aria-labelledby="ui-id-1" aria-selected="true" aria-controls="tabs-1">
            <a id="ui-id-1" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-1">Initiatives and Services</a>
        </li>
        <li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-2" aria-selected="false" aria-controls="tabs-2">
            <a id="ui-id-2" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-2">Don't input too long text here</a>
        </li>
        <li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-3" aria-selected="false" aria-controls="tabs-3">
            <a id="ui-id-3" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-3">Latest Reports</a>
        </li>
    </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

您可以使用a标记在div内包装文字。然后使用position: absolute; 

div.ui-tabs .ui-tabs-nav li a {
    position: relateive;
}

div.ui-tabs .ui-tabs-nav li a > div{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

您可以使用Jquery更新HTML：

$(function(){
    $('.ui-tabs-anchor').each(function(){
        $(this).html('<div>' + $(this).text() + '</div>');
    });
})

演示：http://jsfiddle.net/robinhuy/hg9h4ak6/ enter image description here

答案 1 :(得分：0)

如果您愿意以最小的方式使用flexbox作为渐进式增强，那么...... 

div.ui-tabs .ui-tabs-nav li a {
  min-height: 40px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  
}


.ui-tabs {
  background: none;
  margin-top: 25px;
  padding: 0px;
  border: 0px transparent none;
}
.ui-tabs .ui-tabs-nav {
  background: rgb(106, 134, 156);
  padding: 10px 0px 0px 13px;
  /*border-top:1px #b5c3cc solid;*/
}
.ui-tabs .ui-tabs-nav li {
  border-radius: 0px;
  margin-bottom: -2px;
}
.ui-tabs .ui-tabs-nav li a {
  font-family: "Cabin", Arial;
  font-size: 13px;
  font-weight: bold;
  background: rgb(95, 120, 140);
  color: #ffffff;
  width: 120px;
  text-align: center;
  padding: 1px 0px 7px 0px;
  /*border:1px #a0aeb9 solid;*/
  white-space: normal;
  -ms-word-wrap: break-word;
}
.ui-tabs .ui-tabs-nav li a:hover {
  text-decoration: underline;
}
.ui-tabs .ui-tabs-nav li a:active {
  background: #ffffff;
  color: #1e3069;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
  background: #ffffff;
  color: #1e3069;
}
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {} .ui-tabs .ui-tabs-panel {
  background: transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
  overflow: hidden;
  padding: 20px 20px 20px 20px;
  clear: both;
  border: 0px transparent none;
  border-top: 2px #cccccc solid;
  /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/
}
.ui-tabs-nav {
  border-radius: 0px;
}
.ui-tabs ul.ui-widget-header {
  border-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  border-bottom-color: #ffffff;
}
.ui-tabs .ui-tabs-nav li {
  border: 0;
  display: table-cell;
  height: 100%;
  float: none;
  background-color: rgb(106, 134, 156);
  padding: 0px;
  margin: 0px 0px -2px 0px;
}
.ui-tabs .ui-tabs-nav li a {
  padding: 7px 0 9px 0;
  border: 1px solid #cccccc;
  border-bottom-width: 2px;
  margin-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
  border-bottom: 2px solid #ffffff;
}
.ui-tabs .ui-tabs-nav {
  margin-bottom: -2px;
  /*  display:table;*/
  border-spacing: 5px 0px;
  padding-left: 0px;
  padding-top: 5px;
  /*  width: 100%;*/
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  padding: 0px;
  margin: 0px 0px -2px 0px;
}
/*tabs*/

.tabs .tab-nav .active a {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgb(255, 255, 255);
  background-image: none;
  background-origin: padding-box;
  background-position-x: 0px;
  background-position-y: 0px;
  background-repeat: repeat;
  background-size: auto;
  border-bottom-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-left-color: #ccc;
  border-left-style: solid;
  border-left-width: 0px;
  border-right-color: #ccc;
  border-right-style: solid;
  border-right-width: 0px;
  border-top-color: #ccc;
  border-top-style: solid;
  border-top-width: 0px;
  color: #1e3069;
  margin-bottom: -2px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 7px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 9px;
}
ol ul {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}
.tabs tab-nav a {
  width: 120px;
  text-align: center;
  position: relative;
}
a {
  text-decoration: none;
}
.tabs ul {
  margin-top: -25px;
  background: transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
  overflow: hidden;
  clear: both;
  border: 0px transparent none;
  border-top: 2px #cccccc solid;
  /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/
  background: rgb(106, 134, 156);
  padding: 10px 0px 0px 13px;
}
.tabs ul li {
  display: inline;
  margin: 0px;
  margin-right: 2px;
  /*distance between tabs*/
  font: normal 12px Verdana;
}
.tabs ul li a {
  font-family: "Cabin", Arial;
  font-size: 13px;
  font-weight: bold;
  background: rgb(95, 120, 140);
  color: #ffffff;
  width: 120px;
  text-align: center;
  padding: 1px 0px 7px 0px;
  border: 1px #a0aeb9 solid;
  white-space: normal;
  -ms-word-wrap: break-word;
}
.tabs ul li a:hover {
  text-decoration: underline;
  color: rgb(95, 120, 140);
  background: white;
}
.tabs ul li.selected a {
  position: relative;
  top: 0px;
  font-weight: bold;
  background: #FFF;
  border: 1px solid #AAA;
  border-bottom: 1px solid #FFF;
  color: #000;
}
.tabs ul li.selected a:hover,
.tabs ul li.selected a:hover {
  text-decoration: none;
}
div.tabs {
  border: 0px solid #CCC;
  padding: 0px;
  border-top-color: #AAA;
  background-color: #FFF;
  border-radius: 0 0 0px 0px;
}
.tabs .tabs li a:active {
  background: #ffffff;
  color: #1e3069;
}
.home .tabs .tab-container {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: transparent;
  background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
  background-origin: padding-box;
  background-position-x: 0px;
  background-position-y: 0px;
  background-repeat: no-repeat;
  background-size: auto;
  border-bottom-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-left-color: currentColor;
  border-left-style: none;
  border-left-width: 0px;
  border-right-color: currentColor;
  border-right-style: none;
  border-right-width: 0px;
  border-top-color: #cccccc;
  border-top-style: solid;
  border-top-width: 2px;
  clear: both;
  color: #333;
  font-family: "Arial";
  font-size: 100%;
  line-height: 17px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  outline-color: invert;
  outline-style: none;
  outline-width: 0px;
  overflow: hidden;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  vertical-align: baseline;
}
.tabs,
.ui-tabs,
.ui-widget,
.ui-widget-content,
.ui-corner-all {
  border: 0px;
  padding: 0px;
  margin: 0px;
}
/*tabs*/

.tabs .tab-nav .active a {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgb(255, 255, 255);
  background-image: none;
  background-origin: padding-box;
  background-position-x: 0px;
  background-position-y: 0px;
  background-repeat: repeat;
  background-size: auto;
  border-bottom-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-left-color: #ccc;
  border-left-style: solid;
  border-left-width: 0px;
  border-right-color: #ccc;
  border-right-style: solid;
  border-right-width: 0px;
  border-top-color: #ccc;
  border-top-style: solid;
  border-top-width: 0px;
  color: #1e3069;
  margin-bottom: -2px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 7px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 9px;
}
ol ul {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}
.tabs tab-nav a {
  width: 120px;
  text-align: center;
  position: relative;
}
a {
  text-decoration: none;
}
.tabs ul {
  margin-top: -25px;
  background: transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
  overflow: hidden;
  clear: both;
  border: 0px transparent none;
  border-top: 2px #cccccc solid;
  /*border-left:1px #a0aeb9 solid;
    border-right:1px #a0aeb9 solid;*/
  background: rgb(106, 134, 156);
  padding: 10px 0px 0px 13px;
}
.tabs ul li {
  display: inline;
  margin: 0px;
  margin-right: 2px;
  /*distance between tabs*/
  font: normal 12px Verdana;
}
.tabs ul li a {
  font-family: "Cabin", Arial;
  font-size: 13px;
  font-weight: bold;
  background: rgb(95, 120, 140);
  color: #ffffff;
  width: 120px;
  text-align: center;
  padding: 1px 0px 7px 0px;
  border: 1px #a0aeb9 solid;
  white-space: normal;
  -ms-word-wrap: break-word;
}
.tabs ul li a:hover {
  text-decoration: underline;
  color: rgb(95, 120, 140);
  background: white;
}
.tabs ul li.selected a {
  position: relative;
  top: 0px;
  font-weight: bold;
  background: #FFF;
  border: 1px solid #AAA;
  border-bottom: 1px solid #FFF;
  color: #000;
}
.tabs ul li.selected a:hover,
.tabs ul li.selected a:hover {
  text-decoration: none;
}
div.tabs {
  border: 0px solid #CCC;
  padding: 0px;
  border-top-color: #AAA;
  background-color: #FFF;
  border-radius: 0 0 0px 0px;
}
.tabs .tabs li a:active {
  background: #ffffff;
  color: #1e3069;
}
.home .tabs .tab-container {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: transparent;
  background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
  background-origin: padding-box;
  background-position-x: 0px;
  background-position-y: 0px;
  background-repeat: no-repeat;
  background-size: auto;
  border-bottom-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-left-color: currentColor;
  border-left-style: none;
  border-left-width: 0px;
  border-right-color: currentColor;
  border-right-style: none;
  border-right-width: 0px;
  border-top-color: #cccccc;
  border-top-style: solid;
  border-top-width: 2px;
  clear: both;
  color: #333;
  font-family: "Arial";
  font-size: 100%;
  line-height: 17px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  outline-color: invert;
  outline-style: none;
  outline-width: 0px;
  overflow: hidden;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  vertical-align: baseline;
}
.tabs,
.ui-tabs,
.ui-widget,
.ui-widget-content,
.ui-corner-all {
  border: 0px;
  padding: 0px;
  margin: 0px;
}
div.tabs {
  margin-left: -26px;
  /*margin-left:-45px;*/
  width: 110%;
  /*width:115%;*/
}
/* UL for TABS*/

div.ui-tabs ul > li {
  padding-left: 0px;
  list-style-position: outside;
  list-style-type: disc;
  list-style: disc;
  line-height: 28px;
  padding: 0px;
  border: 0px 0px 0px 0px;
  margin: 0px 0px 0px 15px;
  display: list-item;
  vertical-align: text-bottom;
}
div.ui-tabs ul ul {
  padding-left: 0px;
  list-style-position: outside;
  list-style: disc;
  list-style-type: disc;
  line-height: 28px;
  letter-spacing: 0px;
  padding: 0px;
  border: 0px;
  margin: 0px 0px 0px 0px;
  text-indent: 30px;
  display: list-item;
}
/*Tabs*/

div.ui-tabs .ui-tabs-nav li a {
  text-align: center;
  width: 122px;
  border-left: 0px;
  padding-left: 0px;
  margin-left: 5px;
  /*margin-left:0px;*/
  text-indent: 0px;
  line-height: 20px;
  border-left-color: silver;
  border-left-width: 1px;
  border-left-style: solid;
}
div.ui-tabs-panel table {
  margin-left: 15px;
  border-right-width: 0px;
  border-color: transparent;
  border-right: 0px;
}
div.ui-tabs-panel table td {
  padding: 0 15px 0 0;
}
.ui-tabs .ui-tabs-panel {
  border: 0px 0px 0px 0px;
  margin-right: 75px;
  padding-left: 40px;
}
.ui-tabs .ui-tabs-nav {
  margin-left: 15px;
}
.ui-tabs {
  position: relative;
  /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
  padding: .2em;
}
.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px .2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
  float: left;
  padding: .5em 1em;
  text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
  cursor: text;
}
.ui-tabs .ui-tabs-nav li a,
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
  cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}
div.ui-tabs .ui-tabs-nav li a {
  min-height: 40px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
<div class="tabs contentTabs ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabIndex="0" aria-labelledby="ui-id-1" aria-selected="true" aria-controls="tabs-1"><a id="ui-id-1" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-1">Initiatives and Services</a>
    </li>
    <li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-2" aria-selected="false" aria-controls="tabs-2"><a id="ui-id-2" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-2">12345678912345678</a>
    </li>
    <li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-3" aria-selected="false" aria-controls="tabs-3"><a id="ui-id-3" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-3">Latest Reports</a>
    </li>
  </ul>
  <div aria-hidden="false" aria-expanded="true" id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-labelledby="ui-id-1">
    ​

相关问题
最新问题