I'm using the Tabs Plugin and trying to align the tabs to right. I tried to put dir="rtl"
and style="text-align:right"
but it's not working.
Here's a photo:
This is the code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
ul.ui-tabs .ui-tabs-nav {
text-align: right;
}
li.ui-tabs .ui-tabs-nav li {
float: none;
display: inline-block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
var selected_tab = 1;
$(function () {
var tabs = $("#tabs").tabs({
select: function (e, i) {
selected_tab = i.index;
}
});
selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
tabs.tabs('select', selected_tab);
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
});
</script>
<div id="tabs">
<ul >
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
</ul>
<div id="tabs-1">
Content 1
</div>
<div id="tabs-2">
Content 2
</div>
</div>
<asp:HiddenField ID="selected_tab" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Do PostBack" />
</form>
</body>
</html>
Try using:
#tabs ul {
text-align: right;
}
#tabs ul li {
float: none;
display: inline-block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.