Question

我是HTML的新手（我正在使用Android）。我尝试创建一个网页。我的网页包含h2（标题），表格，图片，编辑文本和按钮。一个h2位于网页的左侧，另一个h2位于网页的右侧。我使用以下代码：

<html>
<head>
<style type="text/css">
body{
  background-color:#d0e4fe;
}
h2{
  color:orange;
  text-align:left;
}
h2{
  color:orange;
  text-align:right;
}
p{
font-family:"Times New Roman";
font-size-size:18px;
}
</style>
</head>

<title>VacantTable And Waiter Status</title>
</head>
<h2>Allot Table Number</h2>
<h2>Table status style</h21>
</html>

但它显示在网页的右侧。我能够显示表格，但如何在表格底部显示按钮？请帮帮我。

Answer 1

有一件事给每个h2不同的类，并以不同的方式对它们应用css。

<div class="main_container">
 <h2 class="left_heading">Allot Table Number</h2>
 <h2 class="right_heading">Table status style</h2>
</div>

上面是你的html。然后在你的CSS中写道：

h2.left_heading{
  color:orange;
  float:left;
}
h2.right_heading{
 color:orange;
 float:right;
}

Answer 2

您应该使用id（通常每页唯一）或类（每页不唯一）。这样，您就可以区分共享相同标签的两个部分。

the CSS section at W3schools

的更多信息

这里的最佳选择似乎是：

<html>
<head>
<style type="text/css">
body{
  background-color:#d0e4fe;
}
h2{
  color:orange;
}
h2.right{
  text-align:right;
}
h2.left{
  text-align:left;
}

p{
font-family:"Times New Roman";
font-size-size:18px;
}
</style>
</head>

<title>VacantTable And Waiter Status</title>
</head>
<h2 class="left">Allot Table Number</h2>
<h2 class="right">Table status style</h21>
</html>

Answer 3

我发现代码存在两个主要问题。首先，在实际的HTML中，第二个h2标记以</h21>而不是</h2>关闭。

其次，你似乎对CSS的运作方式有些误解。当您有两个“重叠”规则时，它们会在标记使用它们时合并。当两个规则对同一属性具有不同的值时，CSS有几个技巧可用于决定保留哪个规则的属性。

第一个技巧是规则的“权重”，它只是id的数量，然后是类，然后是规则中的HTML标记。第二个技巧是！important属性，它告诉计数该规则没有加权。

第三招是你在这里遇到的那个。如果两个规则具有相同的权重，则最后定义的规则优先，这应该意味着在这里，两个h2标记将是右对齐的。您可以在此处查看有关CSS precedence的更多信息。

无论如何，你可能想要做的是为你的h2标签创建不同的类，这样每个类都有一个类，它给它的属性与标准的h2标签不同。这可能是这样的：

CSS：

h2 {
  color:orange;
}
/* This .right is a class that can be included on any tag, no matter what type,
   and then that tag will inherit all these properties. */
.right {
  text-align: right;
}
.left {
  text-align: left;
}

HTML：

<h2 class="right">Allot Table Number</h2>
<h2 class="left">Table status style</h2>

Answer 4

有很多方法可以应用样式，你可以试试这个：

<html>
<head>
<title>VacantTable And Waiter Status</title>
<style type="text/css">
body{
  background-color:#d0e4fe;
}

div.leftH2{
  color:orange;
  text-align:left;
  float: right;
}

div.rightH2{
  color:orange;
  text-align:right;
  float: left;
}

p{
font-family:"Times New Roman";
font-size-size:18px;
}
</style>
</head>

<body>
    <div class="leftH2">
        <h2>Allot Table Number</h2>
    </div>
    <div class="rightH2">
        <h2>Table status style</h2>
    </div>
</body>
</html>

如何在HTML中设置h2和按钮的边距？

4 个答案: