Question

我想把一个带有svg然后是一些文本的按钮组合在一起。

我已按照以下方式实施

    <a class="btn btn-subtle-icon">
      <div class="icon-archive">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="21px" height="21px" viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
         <g>
          <path fill="#797979" d="M17.6,5.5c0-1-1-1-1-1H4.4c0,0-1,0-1,1v1h14.2V5.5z M14.6,2.5H6.4c0,0-1,0-1,1h10.2
                    C15.6,2.5,14.6,2.5,14.6,2.5z M19.6,6.5C19,5.9,19,5.9,19,5.9v1.6H2V5.9c0,0,0,0-0.6,0.6c-0.6,0.6-1,0.8-0.8,2
                    c0.2,1.2,1.4,8.1,1.6,9c0.2,1,1.2,1,1.2,1h14.2c0,0,1.1,0,1.2-1c0.2-0.9,1.3-7.8,1.6-9C20.7,7.3,20.2,7.1,19.6,6.5z M14.6,11.9
                    c0,0,0,1-1,1H7.5c-1,0-1-1-1-1v-2h1.4v1.6h5.3V9.9h1.4V11.9z"/>
         </g>
        </svg>
       </div>
        You can find some of the older CodeClub projects or Partner projects in the archives.
    </a>

div icon-archive只是简单地应用display: inline-block;而btn和btn-subtle-icon只是扩展的bootstrap类。

当我想开始向上移动图像或文本以使它们更好地对齐时，我遇到了麻烦。

当我尝试向svg添加边距时，它只是同时向下移动svg和文本。

有人能指出我做错的方向还是更好的解决方案？

非常感谢。

Answer 1

您犯的第一个错误是将<div>放在<a>内。将其更改为：

<a class="btn btn-subtle-icon">
    <span class="icon-archive">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
        </svg>
    </span>
</a>

Answer 2

尝试将它们分开并使它们浮动。

<a class="btn btn-subtle-icon">
      <div class="icon-archive">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="21px" height="21px" viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
         <g>
          <path fill="#797979" d="M17.6,5.5c0-1-1-1-1-1H4.4c0,0-1,0-1,1v1h14.2V5.5z M14.6,2.5H6.4c0,0-1,0-1,1h10.2
                    C15.6,2.5,14.6,2.5,14.6,2.5z M19.6,6.5C19,5.9,19,5.9,19,5.9v1.6H2V5.9c0,0,0,0-0.6,0.6c-0.6,0.6-1,0.8-0.8,2
                    c0.2,1.2,1.4,8.1,1.6,9c0.2,1,1.2,1,1.2,1h14.2c0,0,1.1,0,1.2-1c0.2-0.9,1.3-7.8,1.6-9C20.7,7.3,20.2,7.1,19.6,6.5z M14.6,11.9
                    c0,0,0,1-1,1H7.5c-1,0-1-1-1-1v-2h1.4v1.6h5.3V9.9h1.4V11.9z"/>
         </g>
        </svg>
       </div>
        <div class="text">
        You can find some of the older CodeClub projects or Partner projects in the archives.
    </div>
    </a>



.icon-archive{
    float:left;
}
.text{
    float:left;
    margin-left: 5px;
}

http://jsfiddle.net/Dhanck/zqn1b53e/1/

使用svg内部和文本实现锚标记的最佳方法

2 个答案: