поместите две кнопки на одну строку

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;

html svg button

0

Abde Ed Derham Agrawli 27 Окт 2019 в 17:14

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>

2

dmuensterer 27 Окт 2019 в 21:20

Нет, это та же проблема. Вы можете набрать код на этом сайте, чтобы увидеть проблему: w3schools.com/tags/tryit.asp?filename=tryhtml_font_color

–

Abde Ed Derham Agrawli

27 Окт 2019 в 17:46

1

Ссылка касается атрибута цвета в HTML5, вы скопировали не тот?

–

Simon Crane

27 Окт 2019 в 18:06

- вряд ли случится. Вы просите людей перейти по сторонним ссылкам, которые подтверждают ваши мысли (которые отличаются от тех, которые дают ответы здесь). ВЫ - тот, кто был бы заинтересован в этом - они сообщают вам ответ, поскольку они уже знают его ...

–

enhzflep

28 Окт 2019 в 04:44

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>

0

Alexander V. Ulyanov 28 Окт 2019 в 04:19

Это более правильный и чистый код, чем предыдущий.

–

Alexander V. Ulyanov

28 Окт 2019 в 19:22

поместите две кнопки на одну строку

2 ответа

Похожие вопросы

Новые вопросы

html