将两个 <ul> 并排放置

Question

我在将两个 ul 并排放置时遇到了一些问题。

div.container > nav > ul > li > div {
  width: 100%;
  margin-top: 13px;
  padding: 25px;
  position: absolute;
  border-bottom: 1px #222222 solid;
  background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
  width: 200px;
  border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
  padding: 3px;
}
div.container > nav > ul > li > div > h4 {
  width: 242px;
  color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
  text-decoration: none;
  color: #222222;
  font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
  color: #d60000;
}

<div>
  <h4>Website</h4>
  <ul>
    <li>
      <a href=''>Basic</a>
    </li>
    <li>
      <a href=''>Premium</a>
    </li>
    <li>
      <a href=''>Without Hosting</a>
    </li>
    <li>
      <a href=''>Without Database</a>
    </li>
    <li>
      <a href=''>Multiple Website's</a>
    </li>
  </ul>
  <h4>Hosting</h4>
  <ul>
    <li>
      <a href=''>Hosting</a>
    </li>
    <li>
      <a href=''>Host a personal site</a>
    </li>
    <li>
      <a href=''>Host an existing website</a>
    </li>
  </ul>
</div>

我现在遇到的问题是 <ul> 彼此下沉，我希望它们是 inline。

有没有人有合适的解决方法。我搜索了其他人关于这个主题的问题，所有方法都不起作用。

Answer 1

将每个 ul 包装到父级 div 中，然后将 display: inline-block; 和 vertical-align: top; 应用于它们。

这里有一个Fiddle来演示。

Answer 2

您可以将 headling/list 组包裹在 div 中并向左浮动：

div.container > nav > ul > li > div {
  width: 100%;
  margin-top: 13px;
  padding: 25px;
  position: absolute;
  border-bottom: 1px #222222 solid;
  background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
  width: 200px;
  border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
  padding: 3px;
}
div.container > nav > ul > li > div > h4 {
  width: 242px;
  color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
  text-decoration: none;
  color: #222222;
  font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
  color: #d60000;
}
.wrapper {
  float: left;
}

<div>
  <div class="wrapper">
    <h4>Website</h4>
    <ul>
      <li>
        <a href=''>Basic</a>
      </li>
      <li>
        <a href=''>Premium</a>
      </li>
      <li>
        <a href=''>Without Hosting</a>
      </li>
      <li>
        <a href=''>Without Database</a>
      </li>
      <li>
        <a href=''>Multiple Website's</a>
      </li>
    </ul>
  </div>
  <div class="wrapper">

    <h4>Hosting</h4>
    <ul>
      <li>
        <a href=''>Hosting</a>
      </li>
      <li>
        <a href=''>Host a personal site</a>
      </li>
      <li>
        <a href=''>Host an existing website</a>
      </li>
    </ul>
  </div>
</div>

Answer 3

你可以这样做：

CSS

div.container > nav > ul > li > div {
    width: 100%;
    margin-top: 13px;
    padding: 25px;
    position: absolute;
    border-bottom: 1px #222222 solid;
    background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
    width: 200px;
    border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
    width: 242px;
    color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
    text-decoration: none;
    color: #222222;
    font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
    color: #d60000;
}

div ul{
  display: inline-block;
  vertical-align: top;
}

HTML

<div>

  <ul>
    <h4>Website</h4>
    <li>
      <a href=''>Basic</a>
    </li>
    <li>
      <a href=''>Premium</a>
    </li>
    <li>
      <a href=''>Without Hosting</a>
    </li>
    <li>
      <a href=''>Without Database</a>
    </li>
    <li>
      <a href=''>Multiple Website's</a>
    </li>
  </ul>

  <ul>
    <h4>Hosting</h4>
    <li>
      <a href=''>Hosting</a>
    </li>
    <li>
      <a href=''>Host a personal site</a>
    </li>
    <li>
      <a href=''>Host an existing website</a>
    </li>
  </ul>
</div>

DEMO HERE

Answer 4

1个方法：你需要 2 div

<div>
    <h4>Website</h4>
     <ul>
     <li>
         <a href=''>Basic</a>
     </li>
     <li>
      <a href=''>Premium</a>
     </li>
   </ul>
 </div>

 <div>
    <h4>Hosting</h4>
      <ul>
           <li>
             <a href=''>Hosting</a>
           </li>
           <li>
            <a href=''>Host a personal site</a>
           </li>
        </ul>
 </div>

Css

div {
  display:inline-block;
  float:left;

}

示例：https://jsfiddle.net/d2q6kbnw/

第二种方法，使用 css...

将你的 h 和 ul 标签变成内联标签

display:inline-block; float:left;

Answer 5

您创建了 2 div "left" 和 "right" :

<div class="left">
 <h4>title</h4>
 <ul>...<ul>
</div>
<div class="right">
 <h4>title</h4>
 <ul>...<ul>
</div>

.left,
.right{
  display: inline-block;
  vertical-align: top;
}

fiddle

Answer 6

问题是 h4 标签是块级元素。对于所需的行为，您需要将两个列表都包装在某种列 div 中，就像这样：

div.container > nav > ul > li > div {
  width: 100%;
  margin-top: 13px;
  padding: 25px;
  position: absolute;
  border-bottom: 1px #222222 solid;
  background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
  width: 200px;
  border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
  padding: 3px;
}
div.container > nav > ul > li > div > h4 {
  width: 242px;
  color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
  text-decoration: none;
  color: #222222;
  font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
  color: #d60000;
}
div.column {
  display: inline-block;
  float: left;
}

<div>
  <div class="column">
  <h4>Website</h4>
  <ul>
    <li>
      <a href=''>Basic</a>
    </li>
    <li>
      <a href=''>Premium</a>
    </li>
    <li>
      <a href=''>Without Hosting</a>
    </li>
    <li>
      <a href=''>Without Database</a>
    </li>
    <li>
      <a href=''>Multiple Website's</a>
    </li>
  </ul>
  </div> 
  <div class="column">
  <h4>Hosting</h4>
  <ul>
    <li>
      <a href=''>Hosting</a>
    </li>
    <li>
      <a href=''>Host a personal site</a>
    </li>
    <li>
      <a href=''>Host an existing website</a>
    </li>
  </ul>
  </div>
</div>

将两个 <ul> 并排放置

Putting two <ul>'s next to each other

html

css

inline

html-lists