Question

谢谢您抽出宝贵的时间回答我的问题。 Ť 他的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元素具有相等的宽度和高度。我添加了width和height元素以尝试执行此操作，但它们似乎没有任何影响。我真的是HTML和CSS的新手，不胜感激！谢谢！

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

Answer 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

Answer 2

link不是一个块元素，因此您无法描述宽度和高度。只需在您的元素中添加“显示：块”即可。

CSS宽度元素什么都不做

2 个答案: