поставить две кнопки на одной линии

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 более широким (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>