This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Html/CSS/JavaScript › Novices ask for help and ask for two triangles in the same straight line. Find the wrong place.
View: 31322|Reply: 23

[CSS/DIV] Novices ask for help and ask for two triangles in the same straight line. Find the wrong place. (Browse out)

[Copy link]
Posted on 12/3/2014 9:38:51 PM | | | |
<!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>Untitled documents</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>






Previous:A new type of DDoS attack is coming
Next:Android SD card speed test software, test your memory card read and write speed
 Landlord| Posted on 12/3/2014 11:20:12 PM |
admin Posted on 2014-12-3 23:17
I don't know what your triangle is all about


The triangle is squeezed out with a span border, let me put out our teacher's standard code
[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 { /*Set the menu layer*/
   font-family:Arial;                                /*font*/
   font-size:16px;                                /*Font size*/
   width:140px;                                 /*width*/
   margin:0 auto;                                /*0.5em between menu items and horizontally centered*/
   border:solid 1px #ccc;                        /*Gray Thin Border*/
   }

#menu a, #menu a:visited {
  text-decoration:none;                         /*Text is not underlined*/
  text-align:center;                                 /*Text is horizontally centered aligned*/
  color:#c00;                                         /*red text*/
  display:block;                                /*Set to block-level element*/
  padding:4px;                                        /*Margins*/
  background-color:#fff;                         /*background color*/
  border:solid 1px #fff;                        /*Same border as background color to prevent jumping*/
  position:relative;                                /*Using Relative Positioning*/
  width:130px;
  }

#menu a span {
  display:none;
}

#menu a:hover {
  border-color:#c00;                                /*Border color red*/
}
  
#menu a:hover span {
        display:block;                /*Set to block-level element*/
  position:absolute;                                 /*Using Absolute Positioning*/
  height:0;                                         /*Height is 0*/
  width:0;                                         /*0*Width is 0*/
  border:solid 8px #fff;                        /*Set default border style*/
  top:4px;                                        /*Vertical positioning*/        
  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>arrow menu</title></head>

<body>
    <div id="menu">
       <a href="#">
               <span class="left"></span> menu item 1<span class="right"></span> </a>
       <a href="#">
                <span class="left"></span> menu item 2</a>
       <a href="#">
                           <span class="left"></span> menu item 3<span class="right"></span> </a>
       <a href="#">
                        <span class="left"></span> menu item 4<span class="right"></span> </a>
       <a href="#">
                           <span class="left"></span> menu item five</a> </div>
</body>
</html>
[/mw_shl_code]
Posted on 12/3/2014 11:17:49 PM |
Clearly you didn't hint to me Posted on 2014-12-3 22:38
The triangle blocks the content, how to adjust the spacing, as soon as I adjust the spacing, it becomes an absolute positioning adjustment

I don't know what your triangle is all about
[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>Untitled documents</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> this is the first <span class="y" ></span></a>
    <a href="#"><span class="z"></span> this is the second <span class="y"></span></a>
    <a href="#"><span class="z"></span> this is the third <span class="y"></span></a>
    <a href="#"><span class="z"></span> this is the fourth <span class="y"></span></a>
    <a href="#"><span class="z"></span> this is the fifth <span class="y"></span></a>
    <a href="#"><span class="z"></span> this is the sixth <span class="y"></span></a>
</div>

</body>
</html>
[/mw_shl_code]
 Landlord| Posted on 12/3/2014 11:17:07 PM |
[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>Untitled documents</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> this is the first <span class="y" ></span></a>
    <a href="#"><span class="z"></span> this is the second <span class="y"></span></a>
    <a href="#"><span class="z"></span> this is the third <span class="y"></span></a>
    <a href="#"><span class="z"></span> this is the fourth <span class="y"></span></a>
    <a href="#"><span class="z"></span> this is the fifth <span class="y"></span></a>
    <a href="#"><span class="z"></span> this is the sixth <span class="y"></span></a>
</div>

</body>
</html>
[/mw_shl_code]
 Landlord| Posted on 12/3/2014 9:40:28 PM |

Posted on 12/3/2014 10:12:27 PM |
Put:display:block; Remove and the problem is solved!
Correct code:

[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>Untitled documents</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]
 Landlord| Posted on 12/3/2014 10:15:06 PM |
admin posted on 2014-12-3 22:12
Put:display:block; Remove and the problem is solved!
Correct code:

Awesome!
Posted on 12/3/2014 10:16:26 PM |
display:block  此元素将显示为块级元素，此元素前后会带有换行符。

So the other triangle will automatically wrap the line
 Landlord| Posted on 12/3/2014 10:17:56 PM |
Wasp Posted on 2014-12-3 22:16
display:block  此元素将显示为块级元素，此元素前后会带有换行符。

So the other triangle will automatically wrap the line

Each of them is a powerful person, and if there is a problem in the future, it will be posted here. Thank you all for your help
 Landlord| Posted on 12/3/2014 10:18:04 PM |
Thank you very much
 Landlord| Posted on 12/3/2014 10:36:11 PM |
The question arises again. [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>Untitled documents</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]
 Landlord| Posted on 12/3/2014 10:38:34 PM |

The triangle blocks the content, how to adjust the spacing, as soon as I adjust the spacing, it becomes an absolute positioning adjustment

QQ图片20141203223601.png (3.61 KB, Number of downloads: 391)

Posted on 12/3/2014 10:53:13 PM |
Clearly you didn't hint to me Posted on 2014-12-3 22:38
The triangle blocks the content, how to adjust the spacing, as soon as I adjust the spacing, it becomes an absolute positioning adjustment

will not help
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com