jquery - 在不更改 HTML 的情况下将文本移动到选项卡底部-6ren

jquery - 在不更改 HTML 的情况下将文本移动到选项卡底部

转载作者：行者123 更新时间：2023-11-28 03:07:05

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

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

我尝试在 jQuery 中这样做，但它不起作用:http://jsfiddle.net/Lance_Bitner/d7a2st79/

.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;

<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">

最佳答案

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

.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;
}

<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>

您可以通过 div 标签将文本包装在 a 中。然后使用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/

关于jquery - 在不更改 HTML 的情况下将文本移动到选项卡底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32151908/

文章推荐： php - Paypal IPN 设置

文章推荐： c++多线程函数调用，通过引用传递参数

jquery - CoffeeScript 与 jQuery、jQuery ($) 和 jQuery
在带有 jQuery 的 CoffeeScript 中，以下语句有什么区别吗？ jQuery ($) -> jQuery -> $ - > 最佳答案第一个与其他两个不同，就像在纯 JavaScr
jquery - jQuery 为什么叫 jQuery？名字的由来是什么？
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭13 年前。 Improve th
jquery - jQuery 插件和 jQuery 小部件之间的区别？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
jquery - jQuery 生产和 jQuery 开发之间的区别？
这个问题可能听起来很愚蠢，但请耐心等待，因为我完全是初学者。我下载了两个 jQuery 版本，开发版本和生产版本。我想知道作为学习 jQuery 的初学者，什么更适合我。最佳答案如果您对 jQue
jquery - jQuery Mobile 使用什么版本的 jQuery？
The documentation说要使用 1.6.4，但我们现在已经升级到 1.7.2。我可以在 jQuery Mobile 中使用最新版本的 jQuery 吗？最佳答案您当然可以，但如果您想
jquery - jquery 新手 - jquery 弹出
我在这里看到这个不错的 jquery 插件:prettyphoto jquery lightbox有没有办法只用一个简单的jquery来实现这样的效果。我只需要弹出和内联内容。你的回复有很大帮助。
jquery - 使用 jQuery 附加 jQuery
很明显我正在尝试做一些 jQuery 不喜欢的事情。我正在使用 javascript 上传图片。每次上传图片时，我都希望它可见，并附加一个有效的删除脚本。显示工作正常，删除则不然，因为当我用 fir
jquery - jQuery 数组和 jQuery 对象之间的技术区别是什么？
这两个哪个是正确的？ jQuery('someclass').click(function() { alert("I've been clicked!"); }); 或 jQuery('somec
jquery - if (jQuery)(function ($) { . . .})(jQuery);插件格式
我正在寻找一个具有以下格式的插件 if (jQuery)(function ($) { -- plugin code -- })(jQuery); 我明白 (function ($)
jquery - 使用哪个版本的 jQuery/jQuery UI？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭10 年前。 Improv
jQuery + jQuery 表单提交插件 + jQuery 验证插件
我知道这个问题已经被问过几次了，但想知道您是否可以帮助我解决这个问题。背景:我尝试创建一个使用 Ajax 提交的表单(jQuery 表单提交)。我已经工作得很好，然后我想在表单上得到验证。我可以使用
jquery - jquery 元数据插件和 jquery 验证插件的主要烦恼
我正在使用无处不在的jquery validate plugin用于表单验证。它支持使用metadata plugin用于向表单元素添加验证规则。我正在使用此功能。当验证查找这些规则时，它会对元素进
jquery - 使用 jQuery 还是不使用 jQuery？
我更喜欢为我一直在开发的网络社区添加实用的视觉效果，但随着事情开始堆积，我担心加载时间。拥有用户真的更快吗加载(希望是缓存的)副本来自 Google 存储库的 jquery？是否使用 jQuery
jquery - 有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery Mobile
这个问题已经有答案了: Slide right to left? (17 个回答) 已关闭 9 年前。你能告诉我有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery
jquery - XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 之间有什么区别
我如何找出最适合某种情况的方法？任何人都可以提供一些示例来了解功能和性能方面的差异吗？最佳答案 XMLHttpRequest 是原始浏览器对象，jQuery 将其包装成一种更有用和简化的形式以及跨浏
jquery - 为什么我在 Assets 安装时无法解析 'jQuery=jquery'？
运行时 php bin/console oro:assets:build ，我有 11 个这样的错误: ERROR in ../node_modules/jquery-form/src/jquery.
jquery - jQuery.ajax 在 jQuery 源代码中的哪里定义？
我试图找到 jQuery.ajax() 在源代码中的定义位置。但是，使用 grep 似乎不起作用。在哪里？谢谢。 > grep jQuery.ajax src/* src/ajax.js:// B
jquery - 从单独的 jQuery 对象创建 jQuery 对象集合
$.fn.sortByDepth = function() { var ar = []; var result = $([]); $(this).each(function()
jquery - jQuery.one() 和 jQuery.on() 之间的区别
我的页面上有多个图像。为了检测损坏的图像，我使用了在 SO 上找到的这个。 $('.imgRot').one('error',function(){ $(this).attr('src','b
jquery - jQuery 如何实现将 $ 设为 jQuery 函数的别名？
我在理解 $ 符号作为 jQuery 函数的别名时遇到了一些麻烦，尤其是在插件中。你能解释一下 jQuery 如何实现这种别名:它如何定义 '$' 作为 jQuery 函数的别名？这是第一个问题。其

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 在不更改 HTML 的情况下将文本移动到选项卡底部