如何左对齐的“顶栏”

类似http://m.huffpost.com/us顶栏如何左对齐的“顶栏”

编辑图标和中心对齐文字：我想创建一个“响应菜单” ICON（左对齐）和一些文字，不要为中心在顶部

我试图酒吧显然不工作：

<div style="float:left" ><a href="#" id="trigger" class="menu-trigger"><i class="fa fa-bars"></i> </a></div> 
    <center>Centered Text</center>

我的菜单触发类是：

.menu-trigger { 
     position: relative; 
     padding-left: 60px; 
     font-size: 1.5em; 
    }

任何帮助将不胜感激！

来源

2014-09-02 user3448267

*类似于http://m.huffpost.com/us topbar *，*我的尝试显然不工作：*，*我的菜单触发器类是*，你想要达到什么目的？你能否详细说明一下？ – 2014-09-02 09:49:45

嗨，我已更新我的问题，更详细！我相信菜单触发器类可以被忽略！ – user3448267 2014-09-02 09:53:12

这个问题有多种解决方法。这里有一个最简单的标记：

HTML

<div> 
    <a>Menu</a> 
    <h1>HELLO</h1> 
</div>

实际上不是必需的div。这里用来制作完整的背景颜色。

CSS

h1 { 
    margin: 0 0 0 80px;   
    text-align: center; 
} 

a { 
    float: right; 
    width: 80px; 
}

演示

Try before buy

It also works with a menu on the left

来源

2014-09-02 09:56:29 insertusernamehere

+1除了'a'应该左对齐。 – 2014-09-02 10:02:42

@HashemQolami谢谢。而且你是对的。我从Huffpost的例子中获得了它。我添加了另一个演示与新的方向。 – insertusernamehere 2014-09-02 10:05:21

你可以尝试这样的事情。这里有一个最上面一栏居中对齐和2个图标链接左对齐（50％的宽度为您发布原始链接）：

HTML：

<div class="menu top"><a href="#">Link</a></div> 
<div class="menu icon"><img src="" /><a href="#">Link</a></div> 
<div class="menu icon"><img src="" /><a href="#">Link</a></div>

CSS：

.menu { 
    display:inline-block; 
    border:1px solid #333; 
    background-color:#ddd; 
    padding:10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    margin-right:-4px; 
} 

.menu>a { 
    color:#000; 
    text-decoration:none; 
} 

.top { 
    width:100%; 
    text-align:center; 
} 

.icon { 
    width:50%; 
} 

.icon>a { 
    padding-left:10px; 
} 

.icon>img { 
    display:inline-block; 
    border:1px solid red; 
    width:30px; 
    height:30px; 
}

这是Fiddle。希望能帮助到你。

来源

2014-09-02 10:04:25 Giorgio

如何左对齐的“顶栏”

回答

相关问题