A client wants a navigation layout as shown below:
客户需要导航布局,如下所示:
As you can see, it is made up of "main links" and "sub links". There can be any number of each, and the text content may change. The width of the menu container will change depending on the page size.
如您所见,它由“主链接”和“子链接”组成。每个都可以有任意数量,文本内容可能会发生变化。菜单容器的宽度将根据页面大小而变化。
God bless the designers, who decided to align the left and right edges of these links, and keep a consistent amount of space between each one. The client is adamant that this is how the navigation is made.
上帝保佑设计师,他们决定对齐这些链接的左右边缘,并在每个链接之间保持一致的空间。客户坚持认为这就是导航的方式。
So, the question is: how can this be done? I've tried it with tables (CSS and HTML), but while they align over the total length, the text in the cells doesn't align on the right hand side.
所以,问题是:如何做到这一点?我已经尝试过使用表格(CSS和HTML),但是当它们在总长度上对齐时,单元格中的文本不会在右侧对齐。
The current solution is to put a custom amount of padding on the elements until they line up, but obviously this is a rubbish solution. I don't want to end up having to measure things with Javascript to lay them out, so if anyone knows of a smart way to get this done, I'd certainly appreciate it.
目前的解决方案是在元素上放置一定量的填充,直到它们排成一行,但显然这是一个垃圾解决方案。我不想最终用Javascript来测量它们,所以如果有人知道一个聪明的方法来完成它,我当然会欣赏它。
2 个解决方案
#1
1
I do think CSS tables will get you most of the way.
我确实认为CSS表可以帮到你。
You merely have to align the text of the first and last elements of each
您只需要对齐每个元素的第一个和最后一个元素的文本
CSS
* {
margin: 0;
padding: 0;
}
.menu ul {
padding: 0 3px;
display: table;
width:100%;
}
.menu-list li {
height: 45px;
list-style: none;
background-color: #f69b58;
display:table-cell;
/* add this */
text-align: center;
font-family: arial;
font-size: 14px;
margin-right: 2px;
}
.menu-list li:first-child {
text-align:left;
}
.menu-list li:last-child {
text-align:right;
}
.menu-list li a {
display: block;
padding: 13px;
color: #ffffff;
text-decoration: none;
}
.menu-list li:active {
color:black;
background-color: #3EAEE9;
}
.menu-list li:hover {
background:#3eaee9;
}
.menu-list li.current {
background-image: -webkit-linear-gradient(top, rgb(7, 80, 158), rgb(6, 101, 243));
background-color: #3EAEE9;
}
NOTE: This will NOT make the distance between each link the same, for that you will (almost certainly) require JS.
注意:这不会使每个链接之间的距离相同,因为您(几乎可以肯定)需要JS。
#2
0
It sounds like something which concerns the right amount of divs to align the text in the center. I've made a solution in fiddle as you can see here: http://jsfiddle.net/denWG/32/
这听起来像是关于正确数量的div以使文本在中心对齐的东西。我已经在这里看到了一个小提琴解决方案:http://jsfiddle.net/denWG/32/
HTML:
<body>
<div class="container">
<div class="in_container">
<a href="" class="name">Example Exampleson</a>
</div>
<div class="in_container">
<a href="" class="title">Producer</a>
</div>
</div>
</body>
CSS:
.container{
width: 200px;
height: 200px;
}
.in_container{
text-align: center;
}
}
.name {
font-weight: bold;
margin: 0 auto;
}
.title {
margin: 0 auto;
font-size: 11px;
line-height: normal;
}
#1
1
I do think CSS tables will get you most of the way.
我确实认为CSS表可以帮到你。
You merely have to align the text of the first and last elements of each
您只需要对齐每个元素的第一个和最后一个元素的文本
CSS
* {
margin: 0;
padding: 0;
}
.menu ul {
padding: 0 3px;
display: table;
width:100%;
}
.menu-list li {
height: 45px;
list-style: none;
background-color: #f69b58;
display:table-cell;
/* add this */
text-align: center;
font-family: arial;
font-size: 14px;
margin-right: 2px;
}
.menu-list li:first-child {
text-align:left;
}
.menu-list li:last-child {
text-align:right;
}
.menu-list li a {
display: block;
padding: 13px;
color: #ffffff;
text-decoration: none;
}
.menu-list li:active {
color:black;
background-color: #3EAEE9;
}
.menu-list li:hover {
background:#3eaee9;
}
.menu-list li.current {
background-image: -webkit-linear-gradient(top, rgb(7, 80, 158), rgb(6, 101, 243));
background-color: #3EAEE9;
}
NOTE: This will NOT make the distance between each link the same, for that you will (almost certainly) require JS.
注意:这不会使每个链接之间的距离相同,因为您(几乎可以肯定)需要JS。
#2
0
It sounds like something which concerns the right amount of divs to align the text in the center. I've made a solution in fiddle as you can see here: http://jsfiddle.net/denWG/32/
这听起来像是关于正确数量的div以使文本在中心对齐的东西。我已经在这里看到了一个小提琴解决方案:http://jsfiddle.net/denWG/32/
HTML:
<body>
<div class="container">
<div class="in_container">
<a href="" class="name">Example Exampleson</a>
</div>
<div class="in_container">
<a href="" class="title">Producer</a>
</div>
</div>
</body>
CSS:
.container{
width: 200px;
height: 200px;
}
.in_container{
text-align: center;
}
}
.name {
font-weight: bold;
margin: 0 auto;
}
.title {
margin: 0 auto;
font-size: 11px;
line-height: normal;
}