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

如您所见，我使用＆＃39; display：inline-block;＆＃39;关于每个元素。

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

我错了什么？

非常感谢你的时间！

Answer 1

CSS Tables救援！

优于浮点数，它们会强制所有元素保持在一起，您可以像在桌面环境中习惯的基于表格的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.

Answer 2

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

Answer 3

使用css position属性，这会对你有所帮助..这是你修改过的代码

  

（请不要忘记给+1）   

＆＃13;

＆＃13;

/*  
		 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%;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;