导航栏水平间距中的社交媒体图标答案

【问题标题】：Social Media icons in navbar horizontal spacing导航栏水平间距中的社交媒体图标
【发布时间】：2017-06-20 17:23:17
【问题描述】：

我正在建立一个个人作品集，我有一个带有标题、社交媒体图标和导航链接的导航栏。在移动设备上查看时，社交媒体图标垂直显示在标题下方。我希望它们水平显示在标题旁边，所以在标题和图标栏之间。

HTML：

<nav class="navbar">
        <div class="container-fluid">
            <!-- Navigation Bar -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="navbar-header">
                <a class="navbar-brand text-center" href="index.html">Title Website</a>
                </div>

                <!-- Small social media icons -->
                <ul class="nav navbar navbar-nav navbar-left pull-left">
                       <li><a href="https://twitter.com/" target="_blank" class="fa fa-twitter fa-lg"></a></li>
                       <li><a href="https://github.com/" target="_blank" class="fa fa-github fa-lg"></a></li>
                       <li><a href="http://www.linkedin.com/in/" target="_blank" class="fa fa-linkedin fa-lg"></a></li>
                </ul>


                    <div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
                        <ul class="nav navbar-nav text-center">
                            <li><a href="index.html"><b>Home</b></a></li>
                            <li><a href="projects.html"><b>Projects</b></a></li>
                            <li><a href="media/resume.pdf" target="_blank"><b>CV/Resume</b></a></li>
                        </ul>
                        </div>

                </div>
    </nav>

CSS：

/* Navigation */
.navbar-header {
    vertical-align: baseline !important;
}

.navbar-brand {
    text-align: center;
    font-size: 30px;
    vertical-align: baseline !important;
}

.icon-bar {
    background-color: black;
}

nav ul {
    display: inline;
}

nav li {
    display: inline;
    padding: 10px;
}

任何帮助将不胜感激。另外，我希望在桌面上查看时标题垂直对齐。我试过navbar-brand {vertical-align: middle !important}，但没有奏效。

谢谢。 -Z

【问题讨论】：

我试过 float: left !important 和 display: inline 和 inline-block 都不起作用。
你能加小提琴吗？
jsfiddle.net/vfu9us4g/#&togetherjs=iOgCGDv38p

标签： html css twitter-bootstrap-3

【解决方案1】：

通过玩耍获得了我想要的图标。新代码：

HTML：

        <!-- Small social media icons -->
        <ul class="nav navbar navbar-nav navbar-left pull-left">
            <li id="socmed"><a href="https://twitter.com/" target="_blank" class="fa fa-twitter fa-lg"></a></li>
            <li id="socmed"><a href="https://github.com/" target="_blank" class="fa fa-github fa-lg"></a></li>
            <li id="socmed"><a href="http://www.linkedin.com/in/" target="_blank" class="fa fa-linkedin fa-lg"></a></li>
        </ul>

CSS：

#socmed {
display: inline-block !important;
float: left !important;
}

【讨论】：