制作音乐播放列表答案

【问题标题】：Making Music Playlist制作音乐播放列表
【发布时间】：2016-06-27 08:13:44
【问题描述】：

我正在尝试制作一个音乐网站来展示我的音乐。我想出了如何通过将我的歌曲放在一个盒子里来制作一个有创意的播放器。但是，我不知道如何在我的框中添加文本。每当我向其中添加文本时，它都会扩展框，使其不均匀。有没有人有关于如何在不使框不均匀的情况下添加文本的提示？

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: lightgrey;
    width: 290px;
    padding: 25px;
    margin: 20px;
}
</style>
</head>
</style>
<body>

<div>
<audio controls>
  <source src="Too High.ogg" type="audio/ogg">
  <source src="Too High.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>

<div>
<audio controls>
  <source src="Visions of the mind.ogg" type="audio/ogg">
  <source src="Visions of the mind.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>

<div>
<audio controls>
  <source src="Let me know.ogg" type="audio/ogg">
  <source src="Let me know.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>

</body>
</html>

【问题讨论】：

标签： html audio text

【解决方案1】：

您可以使用min-height 将所有 div 设置为相似的最小高度

div {
  background-color: lightgrey;
  width: 290px;
  padding: 25px;
  margin: 20px;
  
  min-height:110px; /*CHANGE THIS NUMBER */
}

<div>
  <audio controls>
    <source src="Too High.ogg" type="audio/ogg">
    <source src="Too High.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
  <p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
</div>

<div>
  <p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
  <audio controls>
    <source src="Visions of the mind.ogg" type="audio/ogg">
    <source src="Visions of the mind.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</div>

<div>
  <p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
  <audio controls>
    <source src="Let me know.ogg" type="audio/ogg">
    <source src="Let me know.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</div>

【讨论】：

没用。我正在尝试在音频播放器上方添加曲目标题。每当我添加文本时，它都会使框变大。
您要添加多少文字？我编辑了上面的示例，向您展示了必须移动哪些内容才能使文本位于控件上方。 （将原始的#1 与修改后的#2 和#3 进行比较） 如果您添加的文本超出110px 的初始大小的空间，则该框会变大。如果您添加更多文本，请增大该数字以保持所有框的大小大致相同。
我应该在哪里添加文字？
我遇到的问题是我希望所有内容看起来都很干净，并将所有内容排列成一个播放列表。如果有意义的话，我希望 div 更小，但有歌曲标题和一些信息。我现在拥有它的方式是 div 很大并且占用太多空间。