Question

嘿伙计们，我已经好几天了。我正在尝试在内容元素的左侧有一个垂直导航框。我还需要使用margin-left / right：auto。

来中心这两个

这是fiddle。

我的代码如下

HTML

  <div class="jobs-formatting">
      <div class="jobs-links">
          <ul>
              <li><a href="renovations.html">Renovations</a></li>
              <li><a href="remodelling.html">Remodelling</a></li>
              <li><a href="adding.html">Adding</a></li>
          </ul>       
      </div>
      <div class="body-content-jobs">
              <h1>Heading</h1>
              <p>Information</p>
          </div>
  </div>

CSS

.jobs-formatting
{
    background-color:#f96d16;
    height:500px;
    width:1000px;
    display:block;
    float:left;
    margin-left:auto;
    margin-right:auto;
}
.body-content-jobs
{
    background-color:#5f564d;
    height:500px;
    width:900px;
    margin-top:10px;
    text-align:center;
    color:white;
    float:right;
    margin:auto;
}
.jobs-links
{
    list-style-type:none;
    float:left;
    width:100px;
    border-bottom:1px solid #5f564d;
    border-left:1px solid #5f564d;
    border-top:1px solid #5f564d;
    font-size:25px;
    font-family:Calibri, Times, serif;
    text-align:left;
    margin:auto;
}

我的总体目标是让它看起来像这样; ！[]目标设计1

按钮与class = jobs-links以及与body-content-jobs相关的文本有关。我有这两种内部作业格式化。

我已经被困了很长时间，甚至不知道它是否可能，所以欢迎任何帮助。

Answer 1

你的边界正在推倒它..

http://codepen.io/anon/pen/mJEBq

失去这些^^

 border-bottom:1px solid #5f564d;
border-left:1px solid #5f564d;
border-top:1px solid #5f564d;

在另一个元素旁边有导航框

1 个答案: