CSS宽度元素没有做任何事情[重复]答案

【问题标题】：CSS width element not doing anything [duplicate]CSS宽度元素没有做任何事情[重复]
【发布时间】：2019-04-10 10:44:12
【问题描述】：

感谢您抽出宝贵时间回答我的问题。吨他的 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <link href="css/mainpg.css" rel="stylesheet" type="text/css" />
  </head>
  <body class="mainStyles">
  <div id="mainBox">
    <div class="title">
      <h1>Portfolio</h1>
      <h5>2018</h5>
    </div>
  </div>
    <div class="schedulelist">
        <a href="#" class="schedule">Spanish III</a>
        <a href="#" class="schedule">AP Calculus AB</a>
        <a href="#" class="schedule">AP Physics 1</a>
    </div>
    <div class="schedulelist">
      <a href="#" class="schedule">Composition Workshop</a>
      <a href="#" class="schedule">Fitness Basics</a>
      <a href="#" class="schedule">Advisory</a>
    </div>
</body>s
</html>

和 CSS：

.mainStyles{

  font-size: 12pt;
  font-family: Georgia;
  color: black;

  border-style: solid;
  border-color: #a9a2a9;
  border-width: thin;

}

.title{
  text-align: center;
  font-family: courier;
  font-size: 24px;

  width: 400px;
  border-width: thin;
  border-radius: 20px;
  border-style: dotted;
  margin: 45px auto;
}

.schedule{
  width: 100px;
  height: 35px;
  font-family: courier;
  color: black;
  text-align: center;
  text-decoration: none;
  margin: 20px;
  padding: 10px;
  background-color: #ff2d39;
  border: 1px solid white;
  border-radius: 10px;
}

.schedule:hover{
  background-color: #e0dce2;
}

.schedulelist{
  text-align: center;
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}

我正在尝试使所有 .schedule 元素具有相同的宽度和高度。我已经添加了宽度和高度元素来尝试这样做，但它们似乎没有任何影响。我对 HTML 和 CSS 真的很陌生，如果有任何帮助，我将不胜感激！谢谢！

仅供参考，我已在 Firefox 和 Safari 中尝试过此代码。

【问题讨论】：

标签： html css

【解决方案1】：

尝试将display: inline-block; 添加到您的.schedule 定义中。 <a> 元素默认为 display: inline;，这使得 CSS width 修饰符不起作用。

.schedule {
    ..
    display: inline-block;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

【讨论】：

非常感谢！你刚刚为我节省了几个小时！
developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/… 可能值得一看。在处理页面上元素的流动和布局方式时，事情可能会变得有些混乱。如果它回答了您的问题，也不要忘记接受答案:)

【解决方案2】：

link 不是块元素，所以无法描述宽度和高度。只需尝试将“显示：块”添加到您的元素。

【讨论】：