Question

我在开头有几个按钮，在tex行之间有。

它对于文本开头的按钮很好但我无法设置文本之间的其他按钮。如果我删除 float left 它们会消失，如果我保留它们，它们都会显示在文本的前面，如下所示：

以下是当前代码的小提琴：https://jsfiddle.net/bb61c412/133/

代码：

＆＃13;
＆＃13;
a.previous { padding-top: 100px; float: left; border-radius: 0px; height: 50px; width: 50px; background-color: #538E92; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Star_in_Blue_Box_-_Flag_of_Liberia.svg/50px-Star_in_Blue_Box_-_Flag_of_Liberia.svg.png') center no-repeat; display: inline; } a.next { float: left; border-radius: 0px; height: 30px; width: 30px; background: url('http://www.etudiant.ma/img/arrow-next.png') center no-repeat; background-color: #FFFFFF; display: inline; } h1 { display: inline; } p { display: inline; }
＆＃13;
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" /> <div> <a href="#" class="previous"></a> <h1>Hello</h1> <a href="#"> <p id="now">title 1</p> </a> <a href="#" class="next"> <a href="#"></a> <p>title 2</p> </a> <a href="#" class="next"></a> <a href="#"> <p>title 3</p> </a> <a href="#" class="next"></a> <a href="#"> <p>title 4</p> </a> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

Answer 1

使用span代替p

  <div>
    <a href="#" class="previous"></a>
    <h1>Hello</h1>
    <a href="#">
      <span id="now">title 1</span>
    </a>
    <a href="#" class="next">
      <a href="#"></a>
      <span>title 2</span>
    </a>
    <a href="#" class="next"></a>
    <a href="#">
      <span>title 3</span>
    </a>
    <a href="#" class="next"></a>
    <a href="#">
      <span>title 4</span>
    </a>

  </div>

Answer 2

您只需将所有元素的显示设置为Url，然后使用inline-block根据需要对其进行对齐。

出于语义的目的，除非内容是段落，否则不要使用vertical-align。在这里你可以用p替换它们（正如在另一个答案中已经指出的那样）。

以下几点是完整性观点：

当您移除span时，图片会消失，因为元素float: left设置为display（inline元素默认为a。内联元素没有设置的高度或宽度，因此它们不能像here那样inline。
epascarello在his comment中有一个非常有效的观点。如果图像仅用于显示而没有做任何其他事情，那么最好使用伪元素而不是添加额外的真实元素。虽然CSS仍然保持不变。

background-image

a.previous {
  display: inline-block;
  border-radius: 0px;
  height: 50px;
  width: 50px;
  background-color: #538E92;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Star_in_Blue_Box_-_Flag_of_Liberia.svg/50px-Star_in_Blue_Box_-_Flag_of_Liberia.svg.png') center no-repeat;
}
a.next {
  display: inline-block;
  border-radius: 0px;
  height: 30px;
  width: 30px;
  background: url('http://www.etudiant.ma/img/arrow-next.png') center no-repeat;
  background-color: #FFFFFF;
  margin-bottom: 10px;
}
h1 {
  display: inline-block;
}
span {
  display: inline-block;
  margin-bottom: 18px;
}
div * {
  vertical-align: bottom;
}

Answer 3

您可以通过添加以下行来解决此问题：

a.previous ~ * {
    display: block;
    float: left;
    margin-top: 35px;
    vertical-align: middle;
    padding-top: 4px;
    height: 40px;
}

a.previous ~ h1 {
    margin: 25px 10px 0 10px;
}

演示

＆＃13;

a.previous {
    padding-top: 100px;
    float: left;
    border-radius: 0px;
    height: 50px;
    width: 50px;
    background-color: #538E92;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Star_in_Blue_Box_-_Flag_of_Liberia.svg/50px-Star_in_Blue_Box_-_Flag_of_Liberia.svg.png') center no-repeat;
    display: inline;
}
 
a.previous ~ * {
    display: block;
    float: left;
    margin-top: 35px;
    vertical-align: middle;
    padding-top: 4px;
    height: 40px;
}
 
a.previous ~ h1 {
    margin: 25px 10px 0 10px;
}
 
a.next {
    float: left;
    border-radius: 0px;
    height: 30px;
    width: 30px;
    background: url('http://www.etudiant.ma/img/arrow-next.png') center no-repeat;
    background-color: #FFFFFF;
    display: inline;
}
 
h1 {
    display: inline;
}

p {
    display: inline;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<div>
    <a href="#" class="previous"></a>
    <h1>Hello</h1>
    <a href="#">
        <p id="now">title 1</p>
    </a>
    <a href="#" class="next">
        <a href="#"></a>
        <p>title 2</p>
    </a>
    <a href="#" class="next"></a>
    <a href="#">
        <p>title 3</p>
    </a>
    <a href="#" class="next"></a>
    <a href="#">
        <p>title 4</p>
    </a>
</div>

＆＃13;

（另见this Fiddle）

一行文本之间的按钮

3 个答案:

演示