中心左对齐的菜单项

时间:2018-06-05 19:22:17

标签: css header

我必须开发一个响应式菜单,其中有一个HEADER和菜单项。

菜单项应为

  • 以屏幕为中心。
  • 但也应保持对齐。

HEADER和菜单的左边缘应对齐。

如下图所示。

enter image description here

如何在CSS中最好地实现相同的目标?

1 个答案:

答案 0 :(得分:0)

不确定我是否错过了这里的伎俩,但是这样的话?

JSFiddle

调整宽度/填充值以适应,但这似乎与链接的图像相似

<强> HTML

<div class="menuDiv">
    <table class="menuTable">
        <tr><td>Partner With Us</td></tr>
        <tr><td>Quick Requests</td></tr>
        <tr><td>Do It Yourself</td></tr>
        <tr><td>Creative Lab</td></tr>
        <tr><td>Your Projects</td></tr>
    </table>
</div>

<强> CSS

.menuTable{
  background: #25A;
  width: 40%;
  margin: 0 auto;
}
.menuTable td {
  border-bottom: white solid 1px;
  padding: 0.7em 2em;
  color: white
}
.menuDiv{
  width: 60%;
  background:#BBB;
  margin: 0 auto;
}