将两个按钮放在同一行上

Question

我正在尝试用SVG显示两个相邻的按钮，我尝试了以下方法：

<div class='aiti-next-prev' id='aiti_next'><a><STRONG><span>NEXT</span></STRONG><svg class='carousel-cell' viewBox='0 0 300 20' xmlns='http://www.w3.org/2000/svg'>
    <path d='M8.59 16.34l4.59-4.59-4.59-4.59L10 5.75l6 6-6 6z'/>
    <path d='M0-.25h24v24H0z' fill='none'/>
  </svg></a></div>
<div class='aiti-next-prev' id='aiti_prev' type='button'><a><strong><span>PREV</span></strong><svg class='carousel-cell' viewBox='0 0 300 20' xmlns='http://www.w3.org/2000/svg'>
    <path d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z'/>
    <path d='M0-.5h24v24H0z' fill='none'/>
  </svg></a></div>
&gt;

Answer 1

您需要将viewBox更改为'0 0 24 24'。此外，您还需要为.aiti-next-prev和display:inline-block提供宽度，或者将它们浮动。

我使用viewBox = '0 0 24 24'的原因是svg路径占用了这个空间。您使用的是viewBox='0 0 300 20'，这使得svg变成了wide (300)，留下了大量的空白。

​

.aiti-next-prev{width:50px;display:inline-block; }

<div class='aiti-next-prev' id='aiti_prev' type='button'>
  <a>
        <strong><span>PREV</span></strong>
        <svg class='carousel-cell' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
          <path d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z'/>
          <path d='M0,0h24v24H0z' fill='none'/>
      </svg>
  </a>
</div>

<div class='aiti-next-prev' id='aiti_next'>
  <a>
        <STRONG><span>NEXT</span></STRONG>
        <svg class='carousel-cell' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
          <path d='M8.59 16.34l4.59-4.59-4.59-4.59L10 5.75l6 6-6 6z'/>
          <path d='M0,0h24v24H0z' fill='none'/>
        </svg>
  </a>
</div>

​

Answer 2

​

<style>.aiti-next-prev{display:inline-block}.aiti-next-prev svg{stroke-width:2;fill:none;stroke:black}</style>
<div id='aiti_prev' class='aiti-next-prev'><a><b><span>PREV</span></b><svg xmlns='http://www.w3.org/2000/svg' class='carousel-cell' viewBox='0 0 24 24'>
    <path d='M15,5 9,11 15,17'/>
</svg></a></div>
<div id='aiti_next' class='aiti-next-prev'><a><b><span>NEXT</span></b><svg xmlns='http://www.w3.org/2000/svg' class='carousel-cell' viewBox='0 0 24 24'>
    <path d='M9,5 15,11 9,17'/>
</svg></a></div>

​