<a> тег меньше, чем дочерние элементы

Я пытаюсь сделать простой редактор форматированного текста, и у меня возникли проблемы с кнопками панели инструментов. Я пытаюсь добиться чего-то вроде этого: <a> тег меньше, чем дочерние элементы , но у меня очень странные синие подчеркивания между кнопками. (хром) Вы можете мне помочь?

#buttons svg {
  height: 24px;
  width: 24px;
  display: inline;
}

#buttons svg path {
  fill: #FFFFFF;
  margin: 0;
  padding: 0;
}

#buttons a {
  height: 100%;
}

body div {
  position: absolute;
  display: inline;
}

#toolbar {
  width: 25%;
  z-index: 9;
  height: 100%;
  right: 0;
  box-shadow: 0 0 13px;
  box-sizing: border-box;
  padding: 0 3rem 0 3rem;
  background: dodgerblue;
}

<div id = "toolbar">
  <span id = "buttons">
        <a title = "New" onclick = "app.new()" href = "#">
            <svg>
                <path fill = "#000000" d = "M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" ></path>
            </svg>
        </a>
        <a title = "Save" onclick = "app.save()" href = "#">
            <svg>
                <path d = "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"></path>
            </svg>
        </a>
        <a title = "Open" onclick = "app.open()" href = "#">
            <svg>
                <path fill = "#000000" d = "M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" ></path>
            </svg>
        </a>
    </span>
</div>

Я очень надеюсь увидеть решение с тегом <svg>, так как мне нужно, чтобы приложение было в одном файле. Если это невозможно, не беспокойтесь, но я действительно хочу, чтобы это было так.

— 04.05.2018 19:57

html css svg

04.05.2018 19:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Добавьте это в свою таблицу стилей:

a {
    text-decoration: none;
}

да, это правда, исправление

— 04.05.2018 20:02

04.05.2018 19:57

Он исходит из таблицы стилей пользовательского агента по умолчанию, содержащей свойство text-decoration для <a>, вы можете проверить его с помощью инструментов разработчика Chrome.

Вы можете удалить это, выполнив ..

#buttons a {
  text-decoration: none;
}

Фрагмент:

#buttons svg {
  height: 24px;
  width: 24px;
  display: inline;
}

#buttons svg path {
  fill: #FFFFFF;
  margin: 0;
  padding: 0;
}

#buttons a {
  height: 100%;
}

body div {
  position: absolute;
  display: inline;
}

#toolbar {
  width: 25%;
  z-index: 9;
  height: 100%;
  right: 0;
  box-shadow: 0 0 13px;
  box-sizing: border-box;
  padding: 0 3rem 0 3rem;
  background: dodgerblue;
}

<div id = "toolbar">
  <span id = "buttons">
        <a title = "New" onclick = "app.new()" href = "#">
            <svg>
                <path fill = "#000000" d = "M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" ></path>
            </svg>
        </a>
        <a title = "Save" onclick = "app.save()" href = "#">
            <svg>
                <path d = "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"></path>
            </svg>
        </a>
        <a title = "Open" onclick = "app.open()" href = "#">
            <svg>
                <path fill = "#000000" d = "M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" ></path>
            </svg>
        </a>
    </span>
</div>

Документы: text-decoration - CSS: каскадные таблицы стилей | MDN

04.05.2018 19:59

Просто добавьте text-decoration: none; в селектор #button a { }

#buttons svg {
  height: 24px;
  width: 24px;
  display: inline;
}

#buttons svg path {
  fill: #FFFFFF;
  margin: 0;
  padding: 0;
}

#buttons a {
  height: 100%;
  text-decoration: none;
}

body div {
  position: absolute;
  display: inline;
}

#toolbar {
  width: 25%;
  z-index: 9;
  height: 100%;
  right: 0;
  box-shadow: 0 0 13px;
  box-sizing: border-box;
  padding: 0 3rem 0 3rem;
  background: dodgerblue;
}

<div id = "toolbar">
  <span id = "buttons">
        <a title = "New" onclick = "app.new()" href = "#">
            <svg>
                <path fill = "#000000" d = "M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" ></path>
            </svg>
        </a>
        <a title = "Save" onclick = "app.save()" href = "#">
            <svg>
                <path d = "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"></path>
            </svg>
        </a>
        <a title = "Open" onclick = "app.open()" href = "#">
            <svg>
                <path fill = "#000000" d = "M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" ></path>
            </svg>
        </a>
    </span>
</div>

04.05.2018 20:02

попробуй использовать:

text-decoration: none;

Почему вы предлагаете text-decoration-line: blink;, blink устарел, а цель blink заключалась не в том, чтобы скрыть линию, а в создании чередующейся анимации между видимой и невидимой.

— 04.05.2018 20:11

04.05.2018 20:04

Ответ принят как подходящий

В этом случае вы, вероятно, захотите использовать <button> вместо <a>, поскольку вы не переходите по новому URL-адресу.

Подробнее: Ссылки и кнопки в современных веб-приложениях

Чтобы сбросить стиль кнопки по умолчанию, вы можете, например, добавить следующий CSS:

button {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: none;
}

Спасибо. Спасибо ^ - ^

— 05.05.2018 18:01

04.05.2018 21:20

Другие вопросы по теме

Как сделать адаптивный графический фрейм для H2 Elements?

Сделайте рамку внутри таблицы с помощью CSS

Получение "верхней" и "правильной" позиции на основе щелчка

CSS исправить пустое пространство, появляющееся после изображения

CSS перекрывает div над другим div с относительной позицией / встроенным блоком?

Почему ввод и кнопка не занимают всю ширину div?

Как округлить десятичные знаки в CSS

Как сделать так, чтобы абсолютное позиционирование в адаптивном веб-макете работало и на мобильных устройствах?

Почему я не могу получить ширину контейнера без полосы прокрутки?

Перенаправление HTML при нажатии на страницу

<a> тег меньше, чем дочерние элементы

Ответы 5

Другие вопросы по теме

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