使用CSS的标签 [英] tabs using CSS
问题描述
伙计，
我正在尝试用CSS和HTML实现标签式效果 - 没有
图形。
由于某种原因，我无法控制标签的宽度。我已经用下面的代码粘贴了
。
任何有关如何实现标签的资源的帮助/指针
用CSS会很棒。
谢谢，
LP
<！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>
< meta http-equiv =" Content-Type"含量=" text / html的; charset = iso-8859-1"
/>
< title> Untitled Document< / title>
< ;风格>
..box1 {
显示：内联;
z-index：1;
宽度：2em;
位置：相对;
white-space：nowrap;
border-left：solid＃000000 1px;
border-right：solid＃000000 1px;
border-top：solid＃000000 1px;
border-bottom：solid #FFFFFF 1px;
text-align：center
bottom：-1px;
padding-left：2px;
}
..box4 {
位置：相对;
背景颜色：无;
宽度：5em;
border：none;
border-bottom：solid＃000000 1px;
float：left;
z -index：1;
text-align：right;
}
..box5 {
宽度：3px;
border：none;
float：left;
显示：内联;
z-index：1;
}
..bo x6 {
位置：相对;
宽度：100％;
z-index：-2;
border：solid＃000000 1px;
身高：100px;
top：-1px;
}
< ; / style>
< / head>
< body>
< div class =" box4">
< li class =" box1"> test< / li>
< / div>
< div class =" box5">< / div>
< div class =" box4">
< li class =" box1"> ; test2< / li>
< / div>
< div class =" box5">< / div>
< div class =" box4">
< li class =" box1"> test3< / li>
< / div>
< div class =" box6">< / div>
< / body>
< / html>
Folks,
I''m trying to implement a tabbed effect with CSS and HTML - no
graphics.
for some reason, i''m unable to control the width of the tabs. I''ve
pasted the code below.
Any help / pointers to resources that explain how to implement tabs
with CSS would be great.
Thanks,
LP
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<style>
..box1{
display:inline;
z-index:1;
width:2em;
position:relative;
white-space:nowrap;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-top: solid #000000 1px;
border-bottom: solid #FFFFFF 1px;
text-align:center
bottom: -1px;
padding-left: 2px;
}
..box4{
position: relative;
background-color: none;
width: 5em;
border:none;
border-bottom: solid #000000 1px;
float: left;
z-index:1;
text-align: right;
}
..box5{
width: 3px;
border: none;
float: left;
display:inline;
z-index:1;
}
..box6{
position:relative;
width:100%;
z-index: -2;
border: solid #000000 1px;
height: 100px;
top: -1px;
}
</style>
</head>
<body>
<div class="box4">
<li class="box1">test</li>
</div>
<div class="box5"></div>
<div class="box4">
<li class="box1">test2</li>
</div>
<div class="box5"></div>
<div class="box4">
<li class="box1">test3</li>
</div>
<div class="box6"></div>
</body>
</html>
推荐答案
listaction写道：
listaction wrote:
伙计们，我正在尝试用CSS和HTML实现标签效果 - 没有
图形。
由于某种原因，我无法控制宽度标签。我已经粘贴了下面的代码。
.box1 {
显示：内联;
Folks,
I''m trying to implement a tabbed effect with CSS and HTML - no
graphics.
for some reason, i''m unable to control the width of the tabs. I''ve
pasted the code below.
.box1{
display:inline;
刚刚问我自己的问题...
.box1 {
显示：-moz-inline-box;
display：inline-block;
（需要块或内联块来表示宽度/高度）
Just crossed with my own question...
.box1{
display: -moz-inline-box;
display: inline-block;
(you need block or inline-block for width / height to apply)
有效！ VK非常感谢您的快速反应。
that worked! VK thanks a lot for such a quick response.
" VK" < SC ********** @ yahoo.com>写道：
"VK" <sc**********@yahoo.com> wrote:
Folks，
我正在尝试用CSS和HTML实现标签式效果 - 没有
图形。
由于某种原因，我无法控制标签的宽度。我已经粘贴了下面的代码。
.box1 {
显示：内联;
Folks,
I''m trying to implement a tabbed effect with CSS and HTML - no
graphics.
for some reason, i''m unable to control the width of the tabs. I''ve
pasted the code below.
.box1{
display:inline;
刚刚跨过我自己的问题...
.box1 {
显示：-moz-inline-box;
显示：inline-block;
（你需要块或内联块要应用的宽度/高度）
Just crossed with my own question...
.box1{
display: -moz-inline-box;
display: inline-block;
(you need block or inline-block for width / height to apply)
不聪明，大多数稍微旧的
浏览器都不支持内联块。
< br $>
-
Spartanicus
Not smart, inline-block is poorly supported in most slightly older
browsers.
--
Spartanicus
这篇关于使用CSS的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
