Question

对于我的导航，我使用上一个/下一个按钮。出于原因，这些是图像，其CSS设置其背景图像/高度等。我在我的网站上使用这些，并且在对齐中心时它们完美地工作。

现在我有这两张图片，但我需要它们并排显示！（两者之间有一些间距，整个shebang以页面为中心）

我试过搞乱，但无论我做什么使图像看起来搞砸了（例如：尝试使用自举列），或者不能并排获取它们（例如：传统的内联或其他）。我可以将它们包装在几个div中以使其工作，但不能改变图像的本质。

JSFiddle：https://jsfiddle.net/wgrLfxg3/1/

HTML

<div class="container-fluid">
  <div class="row">
    <img class="the-button center-block" />
    <img class="the-button center-block" />
  </div>
</div>

CSS

.the-button {
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;

    background-image: url(http://placehold.it/122x42);
    width: 122px;
    padding-left: 122px;
    height: 42px;

    margin-bottom: 1em;
}

Answer 1

使用：

display: inline-block;

应该工作。

这是小提琴。 https://jsfiddle.net/plushyObject/wgrLfxg3/2/

Answer 2

<div class="container-fluid">
  <div class="row">
      <table>
       <tr> 
           <td><img class="the-button center-block" /></td>
           <td><img class="the-button center-block" /></td>
        </tr>
      </table>
   </div>
</div>

尝试将它们包装到表格中。这可能只是解决您的问题。
通过这种方式修改间距也很容易 https://jsfiddle.net/wgrLfxg3/1/

Answer 3

你需要编辑填充以使其增加边距：0 auto;并且并排显示它们只显示内联块。

以下是并排修复的代码：

.the-button {
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(http://placehold.it/122x42);
    width: 122px;    
    height: 42px;    
    margin-bottom: 1em;  
}

查看此处的示例

https://jsfiddle.net/wgrLfxg3/3/

你是否也需要将按钮置于其他div的中心位置？

Answer 4

我所知道的最简单方法是使用JavaScript在透明画布上绘制图像。所以，这样做，你将能够看到它下面的东西，你将能够调整它们的大小，它们之间的空间，它们的位置等等。

请参阅以下链接：

W3

html5canvastutorials

canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);

ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'gray';
ctx.fillRect(5, 5, 310, 470);
ctx.fillRect(320, 5,315, 470);

https://jsfiddle.net/v4errq9r/

它使用矩形而不是图像，但我认为它可以通过矩形。

获得两张并排显示的图像

4 个答案: