新手求助，求两个三角在同一条直线上。求错误地方.（浏览出来）

清楚你未暗示我 · 发表于 2014-12-3 21:38:51

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
#box{width:200px; height:200px; margin-right:auto; margin-left:auto;text-align:center;}
#box a, #box a:visited {text-decoration: none;color: #333; display:block;}
#box a:hover {color: #F00;}
#box a:hover span{ display:block; position:absolute;width:0; height:0; border:solid 8px #FFFFFF;}
#box a:hover span.z{ border-left-color:#F00;}
#box a:hover span.y{ border-right-color:#FF0000;}
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>dsad <span class="y"></span></a>
</div>

</body>
</html>

清楚你未暗示我 · 发表于 2014-12-3 23:20:12

admin 发表于 2014-12-3 23:17
不知道你三角形到底是咋搞的

三角形就是用span 边框挤压出来的，我吧我们老师标准的代码放出来吧
[mw_shl_code=html,true]
<!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>

         <style>

#menu {                                        /*对menu层设置*/
font-family:Arial;                               /*字体*/
font-size:16px;                               /*字号*/
width:140px;                               /*宽度*/
margin:0 auto;                               /*菜单项之间间隔0.5em，并水平居中*/
border:solid 1px #ccc;                      /*灰色细边框*/
}

#menu a, #menu a:visited {
  text-decoration:none;                      /*文字无下划线*/
  text-align:center;                               /*文字水平居中对齐*/
  color:#c00;                                        /*红色文字*/
  display:block;                               /*设置为块级元素*/
  padding:4px;                                     /*内边距*/
  background-color:#fff;                      /*背景色*/
  border:solid 1px #fff;                      /*与背景色相同边框，防止跳动*/
  position:relative;                               /*使用相对定位*/
  width:130px;
  }

#menu a span {
  display:none;
}

#menu a:hover {
  border-color:#c00;                               /*边框颜色红色*/
}

#menu a:hover span {
      display:block;             /*设置为块级元素*/
  position:absolute;                               /*使用绝对定位*/
  height:0;                                        /*高度为0*/
  width:0;                                        /*宽度为0*/
  border:solid 8px #fff;                      /*设置默认的边框样式*/
  top:4px;                                     /*竖直方向的定位*/
  overflow:hidden;
  }

  #menu a:hover span.left {
  border-left-color:#c00;
  left:8px;
  }

  #menu a:hover span.right {
  border-right-color:#c00;
  right:8px;
  }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>箭头菜单</title></head>

<body>
<div id="menu">
   <a href="#">
            <span class="left"></span>菜单项一<span class="right"></span>          </a>
   <a href="#">
            <span class="left"></span>菜单项二</a>
   <a href="#">
                        <span class="left"></span>菜单项三<span class="right"></span>          </a>
   <a href="#">
                     <span class="left"></span>菜单项四<span class="right"></span>          </a>
   <a href="#">
                        <span class="left"></span>菜单项五</a> </div>
</body>
</html>
[/mw_shl_code]

admin · 发表于 2014-12-3 23:17:49

清楚你未暗示我发表于 2014-12-3 22:38
三角给内容挡住了，怎么调间距，我一调间距就变成绝对定位调位置

不知道你三角形到底是咋搞的
[mw_shl_code=html,true]
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
#box a{border: 1px solid #666;}
#box{width:250px; height:200px; margin-right:auto; margin-left:auto;text-align:center; border:solid 1px #999999;}
#box a, #box a:visited {text-decoration: none;color: #333; display:block;}
#box a:hover span{ position:relative; border:solid 1px #FFFFFF;padding-left:20px}
#box a:hover{ border:solid 2px #FF0000}
#box a:hover span.z{ border-left-color:#F00;}
#box a:hover span.y{ border-right-color:#FF0000;}
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>这是第一个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第二个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第三个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第四个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第五个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第六个<span class="y"></span></a>
</div>

</body>
</html>
[/mw_shl_code]

清楚你未暗示我 · 发表于 2014-12-3 23:17:07

[mw_shl_code=html,,true]<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
#box a{border: 1px solid #666;}
#box{width:200px; height:200px; margin-right:auto; margin-left:auto;text-align:center; border:solid 1px #999999;}
#box a, #box a:visited {text-decoration: none;color: #333; display:block;}
#box a:hover span{ position:absolute;width:0; height:0; border:solid 8px #FFFFFF;}
#box a:hover{ border:solid 2px #FF0000}
#box a:hover span.z{ border-left-color:#F00;}
#box a:hover span.y{ border-right-color:#FF0000;}
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>这是第一个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第二个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第三个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第四个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第五个<span class="y"></span></a>
<a href="#"><span class="z"></span>这是第六个<span class="y"></span></a>
</div>

</body>
</html>
[/mw_shl_code]

清楚你未暗示我 · 发表于 2014-12-3 21:40:28

admin · 发表于 2014-12-3 22:12:27

把：display:block;去掉，问题解决！
正确代码：

[mw_shl_code=html,true]<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
#box{width:200px; height:200px; margin-right:auto; margin-left:auto;text-align:center;}
#box a, #box a:visited {text-decoration: none;color: #333; display:block;}
#box a:hover {color: #F00;}
#box a:hover span{  position:absolute;width:0; height:0; border:solid 8px #FFFFFF;}
#box a:hover span.z{ border-left-color:#F00;}
#box a:hover span.y{ border-right-color:#FF0000;}
</style>
</head>
<body>
<div id=box>
      <a href="#"><span class="z"></span>dsad <span class="y"></span></a>
</div>

</body>
</html>
[/mw_shl_code]

清楚你未暗示我 · 发表于 2014-12-3 22:15:06

admin 发表于 2014-12-3 22:12
把：display:block;去掉，问题解决！
正确代码：

厉害！

马蜂 · 发表于 2014-12-3 22:16:26

display:block 此元素将显示为块级元素，此元素前后会带有换行符。

所以另外一个三角形会自动换行

清楚你未暗示我 · 发表于 2014-12-3 22:17:56

马蜂发表于 2014-12-3 22:16
display:block 此元素将显示为块级元素，此元素前后会带有换行符。

所以另外一个三角形会自动换行

各个都是厉害人物，以后有问题，就发这里了。谢谢大家帮忙

清楚你未暗示我 · 发表于 2014-12-3 22:18:04

非常感谢大家

清楚你未暗示我 · 发表于 2014-12-3 22:36:11

问题又来了。[mw_shl_code=html,true]<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
#box{width:200px; height:200px; margin-right:auto; margin-left:auto;text-align:center;}
#box a, #box a:visited {text-decoration: none;color: #333; display:block;}
#box a:hover {color: #F00; border: solid 2px #FF0000;}
#box a:hover span{ position:absolute;width:0; height:0; border:solid 8px #FFFFFF;}
#box a:hover span.z{ border-left-color:#F00;}
#box a:hover span.y{ border-right-color:#FF0000;}
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>1<span class="y"></span></a>
<a href="#"><span class="z"></span>2<span class="y"></span></a>
<a href="#"><span class="z"></span>3<span class="y"></span></a>
<a href="#"><span class="z"></span>4<span class="y"></span></a>
<a href="#"><span class="z"></span>5<span class="y"></span></a>
<a href="#"><span class="z"></span>6<span class="y"></span></a>
</div>

</body>
</html>[/mw_shl_code]

清楚你未暗示我 · 发表于 2014-12-3 22:38:34

三角给内容挡住了，怎么调间距，我一调间距就变成绝对定位调位置

Delver_Si · 发表于 2014-12-3 22:53:13

清楚你未暗示我发表于 2014-12-3 22:38
三角给内容挡住了，怎么调间距，我一调间距就变成绝对定位调位置

不会帮顶

		自动登录	找回密码
密码			注册[Register]

[CSS/DIV] 新手求助，求两个三角在同一条直线上。求错误地方.（浏览出来）