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

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

html

如何在HTML中设置h2和按钮的边距？,html,Html,我是HTML新手（我在Android上工作）。我尝试创建一个网页。我的网页包含h2（标题）、表格、图像、编辑文本和按钮。一个h2位于网页左侧，另一个h2位于网页右侧。我正在使用以下代码： <html> <head> <style type="text/css"> body{ background-color:#d0e4fe; } h2{ color:orange; text-align:left; } h2{ color:o

我是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>


身体{
背景色：#d0e4fe；
}
氢{
颜色：橙色；
文本对齐：左对齐；
}
氢{
颜色：橙色；
文本对齐：右对齐；
}
p{
字体系列：“新罗马时代”；
字号：18px；
}
空位和服务员状态
分配表号
表状态样式

但它显示在网页的右侧。我可以显示表格，但如何在表格底部显示按钮？

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

更多信息请访问

这里最明智的选择似乎是：

<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>


身体{
背景色：#d0e4fe；
}
氢{
颜色：橙色；
}
对{
文本对齐：右对齐；
}
h2.左{
文本对齐：左对齐；
}
p{
字体系列：“新罗马时代”；
字号：18px；
}
空位和服务员状态
分配表号
表状态样式

做一件事，给每个h2赋予不同的类，并对它们应用不同的css

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

我认为代码存在两个主要问题。首先，在实际的HTML中，第二个h2标记用

而不是

关闭

其次，您似乎对CSS的工作原理有点误解。当您有两个“重叠”的规则时，当标记使用它们时，它们就会合并。当两个规则对相同的属性有不同的值时，CSS有几个技巧来决定将保留哪个规则的属性

第一个技巧是规则的“权重”，它只是规则中ID、类、HTML标记数量的计数。第二个技巧是！重要属性，它告诉计数此规则未加权

第三个技巧就是你在这里遇到的。如果两个规则具有相同的权重，则定义的最后一个规则优先，这意味着在这里，两个h2标记将右对齐。你可以在这里查看更多有关的信息

无论如何，您可能想做的是为您的h2标记创建不同的类，这样每个类都有一个类，该类赋予它不同于标准h2标记的属性。可能是这样的：

CSS:

HTML:

分配表号
表状态样式

应用样式的方法有很多，您可以尝试以下方法：

<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>


空位和服务员状态
身体{
背景色：#d0e4fe；
}
左二部{
颜色：橙色；
文本对齐：左对齐；
浮动：对；
}
右二部{
颜色：橙色；
文本对齐：右对齐；
浮动：左；
}
p{
字体系列：“新罗马时代”；
字号：18px；
}
分配表号
表状态样式

您的代码中有太多错误。首先，您在h2上应用css，并且没有为每个h2指定不同的类。因此，它将始终为h2应用第二个css，即text align:right；。不能为同一标记编写不同的css。通过定义so，它将覆盖上一个。相反，您可以将其包装在

div

中，并在该div中指定

h2

的属性。请提供set的示例代码margins@sureshpati-堆栈溢出不是“给我代码！！！1”站点。也就是说，在您提供的代码中似乎没有任何类型的按钮。我可以显示表格，但如何在表格底部显示按钮。请帮助我？我可以显示表格，但如何在表格底部显示按钮。请帮助我？请提供完整的html，以便我提供帮助。或者将代码放入jsfiddle.net并将链接粘贴到此处。这样我们可以帮忙。我们需要完整的信息。对于按钮，请在其他TR下创建另一个TR，并向其添加按钮标签。举个例子，假设表有两列：

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;
}

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

<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>