如何在我的代码中将文本放在移动菜单上的标题栏中？答案

【问题标题】：how to put text in title bar on mobile menu in my code?如何在我的代码中将文本放在移动菜单上的标题栏中？
【发布时间】：2016-05-16 16:44:07
【问题描述】：

cece.indiana.edu

移动菜单运行良好；但是，我似乎无法弄清楚如何在标题栏中添加文本。在汉堡菜单的右侧，我想要文本。我该怎么做？我已经花了大约一个小时的这个小新手的东西，但似乎无法弄清楚！ image of the title bar

【问题讨论】：

所以你希望文本在汉堡包旁边，而不是在它现在所在的中间？

标签： javascript html web frontend mobile-website

【解决方案1】：

我刚刚在 Chrome 控制台中添加了这个，但是在 <span class="toggle" 之后添加了这个位

<span class="toggle-right-title">Text</span>

那么 CSS 应该是这样的

.toggle-right-title {
margin-left: 35px;
font-size: 20px;
color: #fff;
font-weight: bold; }

您可以根据需要进行更改和自定义

【讨论】：

【解决方案2】：

技巧是使用float: left。这是 CSS：

CSS

#titleBar .toggle {
    height: 60px;
    left: 0;
    position: relative; /*to make the float work*/
    top: 0;
    width: 80px;
    z-index: 2;
    float: left; /*the magic*/
}
#titleBar .title {
    display: block;
    position: relative;
    letter-spacing: 2px;
    line-height: 44px;
    font-size: 1.3em;
    font-weight: 700;
    text-align: left; /*possibly what you meant*/
    text-transform: uppercase;
    color: #fff;
    z-index: 1;
    float: left; /*the magic*/
}

Float 使跨度彼此相邻浮动，解决了您的问题。希望这会有所帮助！

【讨论】：

我稍微改变了我的代码。虽然它没有显示在在线网页上，但通过创建一个 id 为“logo”的 html 元素并将其命名为 CECE，我能够在标题栏中显示 CECE。但是，当我这样做时，谷歌浏览器会将网页识别为移动网页，并且只显示移动网页。我的 CSS 中没有任何内容可以说明这一点，并且它适用于其他浏览器。我清除了缓存，很困惑。
这很奇怪。可以看看这个版本的代码吗？