Question

我觉得这是一个白痴问这个，我已经在互联网上搜寻一些答案而且似乎找不到任何东西。

我试图做的就是将我的标题元素和无序列表放在同一行而不取消它们包含的特定边距。

＆＃13;

    h3 {
    text-align: left;
    margin: 40px 0px 0px 40px;
    }

    ul {
    text-align: right;
    }

    ul li {
    list-style: none;
    display: inline;
    margin: 0px 20px 0px 0px;
    }

＆＃13;

    <body>
        <h3 id="header"> Darius Spady </h3>
        <ul>
        <li> About </li>
        <li> Projects </li>
        <li> Contact </li>
    </ul>
    </body>

＆＃13;

任何帮助将不胜感激！谢谢！

Answer 1

我将介绍一个父元素并使用display: flex; justify-content: space-between;将它们放在同一行，由可用的空格分隔。您也可以使用align-items垂直对齐它们。

* {margin:0;padding:0;}

ul li {
  list-style: none;
  display: inline;
  margin: 0px 20px 0px 0px;
}

h3 {
  margin: 40px 0px 0px 40px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

<header class="flex">
  <h3 id="header"> Darius Spady </h3>
  <ul>
    <li> About </li>
    <li> Projects </li>
    <li> Contact </li>
  </ul>
</header>

Answer 2

您可以考虑使用Bootstrap，并且可以非常简单地完成您的需要。

<!-- Using Bootstrap -->
        <div class="row">
            <div class="col-md-4">
                <h3>Darius Spady</h3>
            </div>
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item">About</li>
                    <li class="list-group-item">Projects</li>
                    <li class="list-group-item">Contact</li>
                </ul>
            </div>
        </div>

或者您可以使用表格，因此不需要使用样式...

<!-- HTML only -->
        <table>
            <tr>
                <td>
                    <h3>Darius Spady</h3>
                </td>
                <td>
                    <ul>
                        <li> About </li>
                        <li> Projects </li>
                        <li> Contact </li>
                    </ul>
                </td>
            </tr>
        </table>

试图在同一行上有标题和无序列表

2 个答案: