2015-05-19 50 views
1

我刚从网页设计中断了10年。我越来越接近了解div和in的属性(那些在我的时代并不像现在那样受欢迎)。现在我试图得到这样的布局:部门对齐问题

Logo |图标股利 横幅事业部 链接事业部 内容事业部 页脚股利

我此刻的问题为中心链接事业部,这就是:

<div class="menu"> 
    <a class="link1" href="#">Home</a> 
    <a class="link2" href="#">About Us</a> 
    <a class="link3" href="#">Services</a> 
    <a class="link4" href="#">Portfolio</a> 
    <a class="link5" href="#">Contant Us</a> 
</div> 

,我使用的CSS:

.menu 
    { 
     TO BE USED 
    } 

.menu a 
    { 
     display: block; 
     float: left; 
     line-height: 144px; 
     margin: 5px; 
     opacity: 0.3; 
     text-align: center; 
     width: 144px; 
    } 

.link1 
    { 
     background: #fdd22a; 
    } 

.link2 
    { 
     background: #009fe3; 
    } 

.link3 
    { 
     background: #574696; 
    } 
.link4 
    { 
     background: #ee7202; 
    } 
.link5 
    { 
     background: #e61c67; 
    } 
.link6 
    { 
     background: #96c11f; 
    } 

下面是我在做什么的示例:http://www.ragnarok.ws

目前,我没有足够的链接(或知识)将链接与左右边距(与徽标的左侧和社交媒体图标的右侧对齐)对齐到点它看起来不是分散和愚蠢的,所以我想我的下一个最好的选择是尝试和中心链接的div。我连接的编码也有点粗糙。我还没有机会去清理。

任何建议,非常感谢。从.menu.menu a

+0

在你的css中删除float:left; – Elle

回答

1

删除float:left只需添加

margin: 0 auto; 

.menu使中心的链接。

此外,您displayblock改变inline-block.menu a

记得给宽度为.menu。我只是通过Inspect Element尝试了一个宽度为61%,它正确。

OR

block添加

text-align: center; 

.menu

,改变你的displayinline-block.menu a

在此方法中不需要指定宽度为.menu可能是最简单的解决方案。

+0

谢谢,拉尔。你的第二个选项似乎是最容易配置的。我会去玩,但我想说,谢谢你。 –

+0

@RalphLucianoPadroJr。好.. :)请问我是否有任何疑问..同时请标记答案为接受,如果它帮助你.. – Lal

0

Learn CSS Layout摘自:

.menu 
    { 
     width: 600px; 
     margin: 0 auto; 
    } 

从 设置一个块级元素将阻止它的width伸出到其容器的左侧和右侧的边缘。 然后,您可以将左右边距设置为auto,以水平方向为 居中该容器内的元素。元素将占用您指定的宽度 ,则剩余空间将在两个边距之间均匀分配 。

+1

你能解释*为什么这个工程。另外**的文档链接**也是有用的。 – Mooseman