将 3 个元素并排放置在 <div> 中

Question

我想做这个小应用程序:

所以我想在视频的每一侧放置 2 个按钮。

这是 HTML 代码：

<div id="slideshow" class="blockdesign">
  <input type="button" class="buttonChangeVideo" value="<" />
  <video controls src="videotest.mp4">Just a test</video>
  <input type="button" class="buttonChangeVideo" value=">" />
</div>

这是我写的 CSS 代码：

.blockdesign /* the div embracing the 3 other elements */
{
    margin: 0 5px 0 5px;
    display: inline-block;
}

#slideshow
{
    width: 854px;
    height: 100%;
}

#slideshow video /* the video */
{
    width: 84%;
    display: inline-block;
    margin: 0 auto 0 auto;
}

#slideshow .buttonChangeVideo /* the buttons */
{
    display: inline-block;
    width :8%;
    height : 100%;
    margin: 0;
}

如您所见，我在每个元素上都使用了 'display: inline-block;'。

但是当我尝试代码时，我得到了这个：

我做错了什么？

非常感谢您的宝贵时间！

Answer 1

为了并排放置三个元素，我建议在元素中添加一个float: left;。我已经演示了如何在此 jsfiddle 上执行此操作。如您所见，我已经从每个类中删除了 display: inline-block; 并添加了 float: left;。请注意，如果指定的宽度太小而无法包含所有三个元素，则元素可能会换行。

Answer 2

使用css位置属性，这会对你有很大帮助..这是你修改后的代码

(please don't forget to give +1)

/*  
   crackit9.blogspot.in   
   free blogger widgets

*/

#containner {

  position: absolute;

}

#video {

  width: 640px;

  height: 360px;

}

#buttonL {

  position: absolute;

  width: 5%;

  height: 100%;

  left: 0%;

}

#buttonR {

  position: absolute;

  width: 5%;

  height: 100%;

  right: 0%;

}

<div id="containner">
  <button id="buttonL">&lt;</button>
  <button id="buttonR">&gt;</button>
  <video id="video" controls src="videotest.mp4">Just a test</video>
</div>

Answer 3

CSS Tables 救援！

比浮动更好，它们强制所有元素保持在一起，您可以像在桌面环境中习惯的基于 table 的 UI 工具包一样设置它们的样式！

HTML:

<div id="slideshow" class="blockdesign">
  <a type="button" class="buttonChangeVideo" >&lt;</a>
  <video controls src="videotest.mp4">Just a test</video>
  <a type="button" class="buttonChangeVideo" >&gt;</a>
</div>

CSS:

#slideshow {
  display:table-row;
}
#slideshow > * {
  display:table-cell !important;
  height:100%;
  vertical-align:middle;
  padding:2px;
  background:gray;
  color:white;
}

See it in action.

将 3 个元素并排放置在 <div> 中

Placing 3 elements in a <div>, side by side

html

css

web

block

placement