Question

我刚刚开始尝试学习如何编码4天前。我一直在学习html和css。我想通过为自己创建一个网站来尝试将我学到的所有东西放在一起。

我试图创建一个固定标头。在标题的左侧，我想通过将它们链接到每个网站的小图标来合并我的社交媒体帐户。然而，即使我将它们设置为内联，它们也会堆叠在彼此之上。

我需要帮助让它们彼此相邻对齐，并将它们全部放入相同的大小。

我感谢任何帮助！

这是我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="/Users/Hunter/Documents/Website(CSS).css"> 
        <title>Hunter's Website</title>
    </head>
    <body>
        <div class="top">
            <div class="social">
                <div class="row">
                    <div id="twitter" class="col-md-4">
                        <a href="http://twitter/#.com"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" /></a>
                    </div>
                    <div id="instagram" class="col-md-4">
                        <a href="http://instagram/#.com"><img src="http://www.roommagazine.com/sites/default/files/pictures/Instagram-circle-icon-150x150.png" /></a>
                    </div>
                    <div id="quora" class="col-md-4">
                        <a href="http://quora/#.com"><img src="https://s3.amazonaws.com/uploads.startups.fm/wp-content/uploads/2013/01/quora-logo.jpg" /></a>
                    </div>  
                </div>
            </div>
        </div>
        <div class="jumbotron">
        </div>
        <div class="pictures">
        </div>
        <div class="bottom">
    </body>
</html>

CSS代码：

div .top {
    height: 20px;
    width: 100px;
    background-color: black;
    display: inline;
}

#twitter #instagram #quora {
    height: 5px;
    width: 5px;
    z-index: 10;
    float: left;
    clear: both;
    margin: 2px;

}

.jumbotron {
    height: 50px;
    width: 50px;
    background-image: url("insert grad picture")
}

Answer 1

尝试

.col-md-4 {
    display: inline;
}

Answer 2

你这里有问题

#twitter #instagram #quora

这意味着你正在寻找一个div，它在id里面有一个名为instagram的div里面的id = quora。你要找的是这个

#twitter,#instagram,quora{
/*your style*/
}

Answer 3

使用这种格式，或者给你的div一个不太可能改变的类。问题是您使用.top定位父div。使用下面的代码定位正确的子div。

.social .row div{ display: inline;}

这也可行

#twitter, #instagram, #quora{ display: inline;}

Answer 4

如果您使用的是Bootstrap，正如CSS和HTML类型所示，只要将其添加到CSS中就可以了：

.col-md-4 img {
   width: 100%;
   height: auto;    
}

你应该取下div .top，或者至少让它只是.top并且如果它们不是百分比则取下任何身高测量值。使用Bootstrap可能会导致一些问题。如果必须指定静态内容，请使用min-height和max-height。

另请注意其他人已经说过的内容，如果您决定使用#twitter和ID，请使用逗号在CSS中分隔它们。否则你最终会嵌套它们，这就成了一个问题。

非常基本：如何在标题上内联社交媒体徽标

4 个答案: