-1

我想将我的 HTML 播放器向下移动一点，这样它就不会碰到标题。

我尝试改变width，margin但没有奏效。

<div class="cont overflow">
  <div class="left" style="width: 70%; margin: 30px">
    <video controls autoplay width="100%">
       <source src="http://localhost:3000/video" type="video/webm">
      Your browser does not support the video tag.
    </video>
  </div>
</div>

截屏

4

2 回答 2

-1

我想将我的 HTML 播放器向下移动一点

要将任何元素从通常出现在文档流中的位置向下移动，您可以使用多种方法：

方法一：垂直平移

transform: translateY(24px);

样式说明了您希望元素在文档流中的transform: translateY()正常位置出现多远。IE。如果您只声明transform: translateY(0)该元素将出现在与它通常出现在文档流中完全相同的位置。

工作示例：

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0 12px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

div:nth-of-type(2) {
  transform: translateY(0);
}

div:nth-of-type(3) {
  transform: translateY(24px);
}

div:nth-of-type(4) {
  transform: translateY(72px);
}
<div></div>
<div></div>
<div></div>
<div></div>

方法二：相对定位

position: relative;
top: 24px;

样式说明了您希望元素在文档流中的top正常位置出现多远。IE。如果您只声明top: 0该元素将出现在与它通常出现在文档流中完全相同的位置。

工作示例：

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0 12px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

div:nth-of-type(2) {
  position: relative;
  top: 0;
}

div:nth-of-type(3) {
  position: relative;
  top: 24px;
}

div:nth-of-type(4) {
  position: relative;
  top: 72px;
}
<div></div>
<div></div>
<div></div>
<div></div>

于 2019-10-05T22:09:01.203 回答
-3

这很简单，在 HTML 中使用<br>你需要的那么多，所以它不会接触。尝试一下

于 2019-10-05T22:58:43.443 回答