如何在另一个按钮旁边（右侧）放置一个按钮

Question

看看这个fiddle

如你所见，我有2个按钮。我希望不喜欢按钮出现在like按钮旁边（在文本1之后）。怎么做？

Answer 1

将div和数字放在div中并将这些div浮动到左边。

https://fiddle.jshell.net/g6Lhurae/50/

#path4138 { transition: stroke-width 0.3s ease-in; stroke: #3f27dd; stroke-width: 0; stroke-opacity: 0.7; fill: pink; pointer-events:all; } #path4138:hover { stroke-width: 50; fill: red; transition: stroke-width 0.3s ease-out; }

Answer 2

您可以将按钮包装到容器中，然后display: inline-block。 （重要提示：使用此技术时，对象的高度应该相同。）

#example {
  background: #EEE;
  padding: 20px;
  min-height: 100px;
}

.button {
  height: 30px;
  display: inline-block;
}

.button span {
  position: absolute;
  margin-left: -10px;
  margin-top: -6px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50px;
  text-align: center;
  background: gray;
}


.like  {background: url(like.png) 5px 50% no-repeat;
    width: auto;
    height: 30px;
    padding: 0 15px 0 30px;

    float: left;

    cursor: pointer;
    color: #333333;
    font-size: 13px;
    line-height: 30px;

    border:#fff 1px solid;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #ffffff;
}
.like:hover {margin-left: 0px;
    background: url(like2.png) 5px 50% no-repeat;
    color: #0c6502;

    background-color: #f0f0f0;
    border: #0c6502 1px solid;
}

.dislike  { background: url(dislike.png) 5px 50% no-repeat;
    width: auto;
    height: 30px;
    padding: 0 15px 0 30px;

    float: left;

    cursor: pointer;
    color: #333333;
    font-size: 13px;
    line-height: 30px;

    border:#fff 1px solid;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #ffffff;
}
.dislike:hover{background: url(dislike2.png) 5px 50% no-repeat;
    background-color: #f0f0f0;
    border: #ff0000 1px solid;
    color: #ff0000;
}

<div id="example">
<div class="button">
    <div>
        <a class="no" id="0" onclick="like(this.id)">
            <div class="like" style="vertical-align:middle" type="image">
                Like
            </div>
        </a>
    </div>
    <span>
        1
    </span>
</div>
<div class="button">
    <div>
        <a class="no" id="0" onclick="dislike(this.id)">
            <div class="dislike" style="vertical-align:middle" type="image">
                Dislike
            </div>
        </a>
    </div>
    <span>
        1
    </span>
</div>
</div>

然后您需要更改指标的位置，只需使用position:absoulte并使用负边距值重新定位它们。

祝你好运，并询问是否有不足之处。