把两个<ul>放在一起

Question

我在将两个ul彼此相邻时遇到了一些麻烦。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

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 2

将每个ul换成父div并将display: inline-block;和vertical-align: top;应用于他们。

这里有Fiddle来演示。

Answer 3

您可以将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 4

你创建了2个div＆＃34; left＆＃34;和＆＃34;对＆＃34; ：

<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 5

你可以这样做：

<强> 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 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>