Question

这是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_title内的三个项放在同一行（左边是h2，右边是两个a。

此外，h2在项目周围有一个边框，a显示为按钮;我想在所有＆＃34;线＆＃34;后面添加一条线。由这三个元素组成，如下：

jsfiddle： https://jsfiddle.net/klebermo/sf7a6fnj/5/

ps。：另外，如何让按钮内的标记<span>的内容如文字一样？

Answer 1

我会看一下twitter的bootstrap，特别是row和col组件。你可以做到

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

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

Answer 2

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

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

Answer 3

对于第一个问题，您可以通过操纵margin或vertical-align属性轻松完成此操作。例如，如果您将margin: 30px 5px;放在btn元素上，它就会在同一行上。

其次，<span>问题：如果您设置固定的width: 60px;元素（在您的情况下为.btn_comprar），则文本会从按钮溢出到右侧或底部。尝试在按钮元素上设置width: 90px;或更多，如果需要修复，请height: auto;。

Updated fiddle

Answer 4

hr是一个块元素，它基本上只是一个带边框的行。

我建议将其中一个放在容器的顶部并给它一个负边距，使其垂直居中于父级。 position: absolute比它的价值更麻烦。

https://jsfiddle.net/JackHasaKeyboard/0juqg4j7/

至于左右对齐元素，我会让你弄清楚。有很多方法可以实现它，最简单的方法是使用float。

Answer 5

首先，如果您希望文本不换行，则无法在按钮上设置固定宽度。我建议将按钮保持为宽度：自动并使用填充来控制文本周围的间距。我还将两个按钮选择器的样式捆绑在一起，因为它们完全相同

其次，唯一的方法（我知道）让物品在浮动时垂直对齐：右边是手动将它们向下推，所以我建议你按下按钮位置：相对并设置一个顶部：25px; < / p>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content" class="content">
  <!-- Modal -->

  <div id="cardPile">
    <div id="element_1">Card 1</div>
    <div id="element_2">Card 2</div>
    <div id="element_3">Card 3</div>
  </div>
  <div id="cardSlots">
    <div id="slot_1"></div>
    <div id="slot_2"></div>
    <div id="slot_3"></div>
  </div>
</div>


<!--Modal-->
<div class="modal fade" id="textModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" style="text-align:center">Great Work!</h4>

      </div>
      <div class="modal-body">Everything was matched :)</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <a href="www.google.com">
          <button type="button" class="btn btn-primary">Next</button>
        </a>

      </div>
    </div>
  </div>
</div>

第三，请记住使用clearfix，以便.produto_title容器保持高度！

print "My numbers are:", str(l).strip("[]")

最后，不是使用另一个div来制作这行，而是使用：在.produto-title上的psuedo-element之前（不能使用：之后如果你还在做一个clearfix）。

/* 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);
}

这是一个有效的演示： https://jsfiddle.net/zcqLbg4h/1/

在同一行的<div>中显示三个元素

5 个答案: