Question

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

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

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

＆＃13;

 *{
                    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;
                }

＆＃13;

<!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>

＆＃13;

Answer 1

我想你想要这个，可能会对你有帮助。

 <!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>

Answer 2

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

Answer 3

尝试这样的事情：

<!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>

Answer 4

这是你想要的吗？

* {
     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>

在HTML锚标签重叠

4 个答案: