堆栈内存溢出
  繁体   English   中英

HTML中的锚标记重叠

[英]in HTML anchor tags are overlapped

 原文  2018-03-14 06:29:13  0   4    html/ css/ html5/ css3/ margin

问题描述

在下面的代码中，锚标签重叠了，我尝试设置left:1px和margin-left:1px但是它们无法工作

而且我也不想在上述代码中将所有三列对齐到水平居中（.user-info），我想创建一个与stackoverflow> users页面相同的用户列表页面

告诉我我的代码有什么问题或我应该修改什么 

  *{ box-sizing: border-box; } div{ border: 1px solid black; } .user-info{ float: left; position: relative; height: 80px; width: 300px; margin: .5% .5% .5% .5%; } .user-image{ position: absolute; top: 0px; left:0px; height: 80%; width: 22%; } .user-image img{ position: absolute; top: 0px; left:0px; height: 100%; width: 100%; } .user-detail{ position: absolute; top: 0%; left: 22%; height: 80%; width: 78%; } .user-name{ position: absolute; top:0%; left:0%; height: 40%; width: 98%; margin-left: 2%; margin-top: 2%; } .user-reputation{ position: absolute; top:40%; left:0%; height: 40%; width: 98%; margin-left: 2%; margin-top: 4%; } .user-tags{ position: relative; top:80%; height: 20%; width: 100%; padding-left: 25%; padding-top: 0px; overflow: visible; } .user-tags a{ position: absolute; top:0px; font-size: 10px; margin-top: 0px; border: 1px solid green; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="jquery.min.js"></script> </head> <body> <div class="container"> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> </div> </body> </html>

4 个解决方案

解决方案1
 2  2018-03-14 10:09:09

我想您想要这个，也许会对您有所帮助。 

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="jquery.min.js"></script>
       <style>
             *{
                     box-sizing: border-box;
                 }
                 div{
                         border: 1px solid black;
                 }
                 .user-info{
                         float: left;
                         position: relative;
                         height: 80px;
                         width: 300px;
                         margin: .5% .5% .5% .5%;

                 }
                 .user-image{
                         position: absolute;
                         top: 0px;
                         left:0px;
                         height: 80%;
                         width: 22%;
                 }
                 .user-image img{
                         position: absolute;
                         top: 0px;
                         left:0px;
                         height: 100%;
                         width: 100%;
                 }
                 .user-detail{
                         position: absolute;
                         top: 0%;
                         left: 22%;
                         height: 80%;
                         width: 78%;
                 }
                 .user-name{
                         position: absolute;
                         top:0%;
                         left:0%;
                         height: 40%;
                         width: 98%;
                         margin-left: 2%;
                         margin-top: 2%;
                 }
                 .user-reputation{
                         position: absolute;
                         top:40%;
                         left:0%;
                         height: 40%;
                         width: 98%;
                         margin-left: 2%;
                         margin-top: 4%;

                 }
                 .user-tags{
                         position: relative;
                         top:80%;
                         height: 20%;
                         width: 100%;
                         padding-left: 25%;
                         padding-top: 0px;
                         overflow: visible;
                 }
                 .user-tags a{
                        float:left;
                         font-size: 10px;
                         margin-top: 0px;
                         border: 1px solid green;
                 }
             </style>
    </head>
    <body>
           <div class="container">
               <div class="user-info">
                <div class="user-image"><a href="">
                 <img src="windowsvslinux.jpg" alt=""></a>
               </div>
                <div class="user-detail">
                    <div class="user-name">
                    <a href="">Alvis Vadaliya</a></div>
                    <div class="user-reputation">1200</div>
                </div>
                    <div class="user-tags">
                        <a href="">Link1</a>
                        <a href="">Link2</a>
                        <a href="">Link3</a>
                        <div style="clear:both"></div>
                    </div>
                </div>
                <div class="user-info">
                <div class="user-image"><a href="">
                 <img src="windowsvslinux.jpg" alt=""></a></div>
                <div class="user-detail">
                    <div class="user-name">
                    <a href="">Alvis Vadaliya</a></div>
                    <div class="user-reputation">1200</div>
                </div>
                    <div class="user-tags">
                        <a href="">Link1</a>
                        <a href="">Link2</a>
                        <a href="">Link3</a>
                        <div style="clear:both"></div>
                    </div>
                </div>
                <div class="user-info">
                <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div>
                <div class="user-detail">
                    <div class="user-name"><a href="">Alvis Vadaliya</a></div>
                    <div class="user-reputation">1200</div>
                </div>
                    <div class="user-tags">
                        <a href="">Link1</a>
                        <a href="">Link2</a>
                        <a href="">Link3</a>
                    <div style="clear:both"></div>
                    </div>
                </div>
                <div class="user-info">
                <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div>
                <div class="user-detail">
                    <div class="user-name"><a href="">Alvis Vadaliya</a></div>
                    <div class="user-reputation">1200</div>
                </div>
                    <div class="user-tags">
                        <a href="">Link1</a>
                        <a href="">Link2</a>
                        <a href="">Link3</a>
                      <div style="clear:both"></div>
                    </div>
                </div>
                <div class="user-info">
                <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div>
                <div class="user-detail">
                    <div class="user-name"><a href="">Alvis Vadaliya</a></div>
                    <div class="user-reputation">1200</div>
                </div>
                    <div class="user-tags">
                        <a href="">Link1</a>
                        <a href="">Link2</a>
                        <a href="">Link3</a>
                     <div style="clear:both"></div>
                    </div>
                </div>
                <div style="clear:both"><div>
           </div>
    </body>
    </html>

解决方案2
 0  2018-03-14 06:33:13

只需删除position: absolute; 来自.user-tags a

解决方案3
 0  2018-03-14 06:46:38

尝试这样的事情： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <style>
        *{
                box-sizing: border-box;
            }
            div{
                border: 1px solid black;    
            }      
            .user-info{
                float: left;
                position: relative;
                height: 104px;
                width: 300px;
                margin: .5% .5% .5% .5%;

            }
            .user-image{
                position: absolute;
                top: 0px;
                left:0px;
                height: 80%;
                width: 22%;
            }
            .user-image img{
                position: absolute;
                top: 0px;
                left:0px;
                height: 100%;
                width: 100%;
            }
            .user-detail{
                position: absolute;
                top: 0%;
                left: 22%;
                height: 80%;
                width: 78%;
            }
            .user-name{
                position: absolute;
                top:0%;
                left:0%;
                height: 40%;
                width: 98%;
                margin-left: 2%;
                margin-top: 2%;
            }
            .user-reputation{
                position: absolute;
                top:40%;
                left:0%;
                height: 40%;
                width: 98%;
                margin-left: 2%;
                margin-top: 4%;

            }
            .user-tags{
                position: relative;
                top:80%;
                height: 20%;
                width: 100%;
                padding-left: 25%;
                padding-top: 0px;
                overflow: visible;
            }
            .user-tags a{
                top:0px;
                font-size: 10px;
                margin-top: 0px;
                border: 1px solid green;
            }
    </style>
</head>
<body>
       <div class="container">
           <div class="user-info">
            <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div>
            <div class="user-detail">
                <div class="user-name"><a href="">Alvis Vadaliya</a></div>
                <div class="user-reputation">1200</div>
            </div>
                <div class="user-tags">
                    <a href="">Link1</a>
                    <a href="">Link2</a>
                    <a href="">Link3</a>
                </div>
            </div>
            <div class="user-info">
            <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div>
            <div class="user-detail">
                <div class="user-name"><a href="">Alvis Vadaliya</a></div>
                <div class="user-reputation">1200</div>
            </div>
                <div class="user-tags">
                    <a href="">Link1</a>
                    <a href="">Link2</a>
                    <a href="">Link3</a>
                </div>
            </div>
            <div class="user-info">
            <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div>
            <div class="user-detail">
                <div class="user-name"><a href="">Alvis Vadaliya</a></div>
                <div class="user-reputation">1200</div>
            </div>
                <div class="user-tags">
                    <a href="">Link1</a>
                    <a href="">Link2</a>
                    <a href="">Link3</a>
                </div>
            </div>
            <div class="user-info">
            <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div>
            <div class="user-detail">
                <div class="user-name"><a href="">Alvis Vadaliya</a></div>
                <div class="user-reputation">1200</div>
            </div>
                <div class="user-tags">
                    <a href="">Link1</a>
                    <a href="">Link2</a>
                    <a href="">Link3</a>
                </div>
            </div>
            <div class="user-info">
            <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div>
            <div class="user-detail">
                <div class="user-name"><a href="">Alvis Vadaliya</a></div>
                <div class="user-reputation">1200</div>
            </div>
                <div class="user-tags">
                    <a href="">Link1</a>
                    <a href="">Link2</a>
                    <a href="">Link3</a>
                </div>
            </div>
       </div>
</body>
</html>

解决方案4
 0  2018-03-14 10:04:06

这是你想要的吗？ 

 * { box-sizing: border-box; } div { border: 1px solid black; } .user-info { float: left; position: relative; height: 80px; width: 300px; margin: .5% .5% .5% .5%; } .user-image { position: absolute; top: 0px; left: 0px; height: 80%; width: 22%; } .user-image img { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .user-detail { position: absolute; top: 0%; left: 22%; height: 80%; width: 78%; } .user-name { position: absolute; top: 0%; left: 0%; height: 40%; width: 98%; margin-left: 2%; margin-top: 2%; } .user-reputation { position: absolute; top: 40%; left: 0%; height: 40%; width: 98%; margin-left: 2%; margin-top: 4%; } .user-tags { position: relative; top: 80%; height: 20%; width: 100%; padding-left: 25%; padding-top: 0px; overflow: visible; } .user-tags a { top: 0px; font-size: 10px; margin-top: 0px; border: 1px solid green; display: inline-block; vertical-align: top; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> <div class="user-info"> <div class="user-image"><a href=""><img src="windowsvslinux.jpg" alt=""></a></div> <div class="user-detail"> <div class="user-name"><a href="">Alvis Vadaliya</a></div> <div class="user-reputation">1200</div> </div> <div class="user-tags"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Wordpress中的HTML Anchor标签 抓取锚点 ( <a>) html 标签</a> HTML 锚标签重叠 HTML标签在bootstrap 3 Thumbnail类中变得重叠 锚标签和目标行为？ -HTML HTML 锚标记之间的间距 嵌套HTML-anchor标签 附加锚标记以列出html 使用[href]转义html锚标记 HTML 表格和锚标签问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM