Html 在a<；中显示三个元素；部门>；同舟共济

这是html代码：

  <div class="produto_title">
    <h2 th:text="${produto.name}"></h2>
    <a href="#" class="btn_free">Baixar</a>
    <a href="#" class="btn_comprar">Comprar <span th:text="${produto.preco}"></span></a>
  </div>

谁能告诉我如何将

.produto\u title

中的三个项目放在同一行中（

h2

浮动在左侧，两个

a

浮动在右侧）

另外，

h2

在项目周围有一个边框，

a

像按钮一样显示；我想在这三个元素形成的所有“线”后面加一条线，如下所示：

jsfiddle:

---

ps.：另外，如何让标签

的内容像文本一样进入按钮？

我会看看twitter的引导，特别是行和列组件。 你可以

<div class="row">

<div class="col-md-4">
// something here
</div>

<div class="col-md-4">
// something here
</div>

<div class="col-md-4">
// something here
</div>
</div>

//这里有东西
//这里有东西
//这里有东西

这将全部显示在同一行上，将行分成相等的三分之一

btns{
   height: auto; //Fix the span not being in the element
   margin-top: 20px; //line everything up with the top of the heading element.
}

至于线，你可以做一个div，给它一个绝对位置（记住给父对象一个相对位置），然后相应地给它定位

.parent{
  position: relative;
  width: 100%;
}
.line{
  height: 4px;
  background-color: #000;
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 100%;
}

---

这是一个非常简单的答案，但它将是您开始回答的开始。

对于第一个问题，您可以通过操纵

边距

或

垂直对齐

属性轻松完成。例如，如果你把

边距：30px 5px

在您的

btn

元素上，它将位于同一行

其次是

问题：如果设置固定

宽度：60px（在您的示例中为
.btn\u compar
），文本将从按钮右侧或底部溢出。尝试设置
宽度：90px或更多，或<代码>高度：自动如果需要修复它

一个
hr
是一个块元素，它本质上只是一条带边框的线

我建议将其中一个粘贴在容器顶部，并给它一个负边距，使其垂直居中于父容器<代码>位置：绝对
麻烦太多了


至于将元素向左和向右对齐，我会让您解决这个问题。有很多方法可以实现它，最简单的方法是使用
float
首先，如果希望文本不换行，则不能在按钮上设置固定宽度。我建议保持按钮的宽度：auto，并使用填充来控制文本周围的间距。我还将捆绑两个按钮选择器的样式，因为它们完全相同

其次，让项目在浮动时垂直对齐的唯一方法（据我所知）：右键是手动向下按，因此我建议将按钮设置为位置：相对，并设置顶部：25px

/* Bundled both buttons together as they share the same styles */
.btn_free,
.btn_comprar {
  float: right;
  /* width: 60px; Removing this to allow the text to set the button width */
  /*  height: 20px; Removing this to let the line-height set the button height */
  background: silver;
  border-radius: 5px;
  padding: 1px 15px;
  box-shadow: 1px 1px 1px #000;
  /*  display: block; Removing this as floats are automatically display: block; */
  /*  text-align: center; Removing this since the text is already setting width */
  background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
  font-family: arial;
  font-size: 12px;
  line-height:20px;
  position: relative; /* Pushing buttons down a bit */
  top: 25px;
  margin: 0 10px; /* Spacing buttons out */
}

.btn_free:hover,
.btn_comprar:hover{
  background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}

第三，记住使用clearfix，以便.produto_标题容器保持高度

.produto_title:after {
  content: "";
  display: table;
  clear: both;  
}

最后，与使用另一个div来生成行不同，我将在.produto title上使用：before psuedo元素（如果您也在执行clearfix，则不能使用：after）

这是一个有效的演示：
为什么不尝试解决问题，需要帮助时再回来？不要给BTN一个固定的高度，做一个“高度：自动”，产品价格也会在按钮内。如果你知道它们总是一样高，你可以给元素留一个页边空白，但是如果大小是动态的，你可能需要一点JavaScript来很好地定位元素。快速示例。。。线条是背景，因此可以使用线性渐变创建它。我不想在这里使用引导；此外，这些元素已经在这里保持一致。那元素后面的线呢？有没有这样做的提示？用
style=“z-index:-1”
做一个div，并用必要的颜色将其放置在页面中。那它将成为一切的后盾
.produto_title:before {
  content: '';
  height: 1px;
  background: #000;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
}