如何将两个div对齐/设置/放置/设置为彼此相邻

I have some problem with my CSS and HTML. I can't style the 2 footer items to be on the same line. Is there something wrong with how I have my divs and styles?

我的CSS和HTML有些问题。我不能将2页脚的项目设置为在同一行上。我的div和风格怎么样有问题？

Suggestion to make better code is very welcome. I have tried float, inline-block.

建议制作更好的代码是非常受欢迎的。我试过浮点数，内联块。

/*footer*/
footer {
  color:white;
  background-color: #c2b180;
}
.button-social {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
a {
  text-decoration: none;
}
.sameline.block {
  float:left;
  width:50%;
}

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div class="sameline.block">
  <div class="about-this-page">
      <h3>About this page</h3>
      <p>Made by Duy Ta</p>
  </div>
    <div class="around-the-web">
      <h3>Around the Web</h3>
       <a class="button-social" href="#"><i class="fa fa-linkedin"></i></a>
       <a class="button-social" href="#"><i class="fa fa-github"></i></a>
       <a class="button-social" href="#"><i class="fa fa-twitter"></i></a>
  </div>
  </div>
  <div id="footer-below">qlip © 
    <script>document.write(new Date().getFullYear())</script>. All Rights Reversed
  </div>
</footer>

5 个解决方案

#1

You have to specify float for right elements also

您还必须为正确的元素指定float

#footer-below {float: right; width: 50%;}

#2

A class name can't contain a dot.

类名不能包含点。

So change it to for example samelineblock

因此，将其更改为例如samelineblock

Then select the divs that are a direct child of that element and give them an inline-block.

然后选择作为该元素的直接子元素的div，并为它们提供内联块。

You can adjust the width by setting it.

您可以通过设置来调整宽度。

/*footer*/

footer {
  color: white;
  background-color: #c2b180;
}

.button-social {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

a {
  text-decoration: none;
}

.samelineblock>div {
  display: inline-block;
  width: 40%;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div class="samelineblock">
    <div class="about-this-page">
      <h3>About this page</h3>
      <p>Made by Duy Ta</p>
    </div>
    <div class="around-the-web">
      <h3>Around the Web</h3>
      <a class="button-social" href="#"><i class="fa fa-linkedin"></i></a>
      <a class="button-social" href="#"><i class="fa fa-github"></i></a>
      <a class="button-social" href="#"><i class="fa fa-twitter"></i></a>
    </div>
  </div>
  <div id="footer-below">qlip ©
    <script>
      document.write(new Date().getFullYear())
    </script>. All Rights Reversed
  </div>
</footer>

#3

First of all don't use dots to name the classes. Then in order to set two elements side by side you need to set their float to left, not the container. So in your example rename sameline.block to samelineblock and replace

首先，不要使用点来命名类。然后，为了并排设置两个元素，您需要将它们的浮动设置为左，而不是容器。因此，在您的示例中，将sameline.block重命名为samelineblock并替换

.sameline.block {
  float: left;
  width: 50%;
}

with

同

.samelineblock > div {
  float: left;
  width: 50%;
}

#4

Try using below code in your css.

尝试在css中使用以下代码。

.samelineblock .about-this-page,.samelineblock .around-the-web { display: inline-block; padding:0 30px 0 0; }

.samelineblock .about-this-page，.samelineblock .around-the-web {display：inline-block;填充：0 30px 0 0; }

#5

-1

Use flexbox on your container .sameline-block. You can then add margin and/or padding and other styles to your flex children .about-this-page and .around-the-web.

在容器.sameline-block上使用flexbox。然后，您可以为flex儿童.about-this-page和.around-the-web添加边距和/或填充以及其他样式。

/*footer*/
footer {
  color:white;
  background-color: #c2b180;
}
.button-social {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
a {
  text-decoration: none;
}
.sameline-block {
  display: flex;
  flex-wrap: nowrap;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div class="sameline-block">
    <div class="about-this-page">
        <h3>About this page</h3>
        <p>Made by Duy Ta</p>
    </div>
     <div class="around-the-web">
        <h3>Around the Web</h3>
         <a class="button-social" href="#"><i class="fa fa-linkedin"></i></a>
         <a class="button-social" href="#"><i class="fa fa-github"></i></a>
         <a class="button-social" href="#"><i class="fa fa-twitter"></i></a>
    </div>
  </div>
  <div id="footer-below">qlip © 
    <script>document.write(new Date().getFullYear())</script>. All Rights Reversed
  </div>
</footer>

#1