Между двумя моими кнопками в HTML / CSS есть небольшая синяя линия

Essence спросил: 13 июня 2018 в 12:00 в: html

Это изображение двух кнопок с маленькой синей линией посередине. Это мой css / html

<body>

  <div class="top">
    <h1></h1>
  </div>

  <div class="top-rectangle">

  </div>

  <div class="top-main">
    <p class="title3"></p>
  </div>

  <div class="main-buttons">
    <a href="/downloads/list.php" target="_blank">
      <button type="download-button" class="btnop" style="text-align: center">Download</button>
      <a href="pastes" target="_blank">
        <button type="purchase-button" class="btnop" style="text-align: center">Purchase</button>
      </a>
  </div>

  <style>
    .btnop {
      background: #298371;
      color: white;
      height: 104px;
      width: 308px;
      font-size: 1.2em;
      border-radius: 5px;
      border-width: 0px;
    }
  </style>
</body>

Я искал ошибки ввода и прочее, и я не могу узнать почему эта маленькая синяя линия просто сидит между кнопками и прикрепляет их.?

3 ответа

Jason C. ответил: 13 июня 2018 в 03:41

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

Решение 2: вы можете избавиться от своих тегов и используйте только кнопки и поместите это в функцию onclick кнопки:

window.location ="https://www.something.com";

StaticBeagle ответил: 13 июня 2018 в 12:24

Якоря, <a> элементы не должны содержать кнопок, это недействительный синтаксис. Как упоминалось в комментариях, синяя линия представляет собой подчеркнутое пустое пространство от якоря. Я предполагаю, что вы пытаетесь перенаправить пользователя, когда нажимаете кнопку Download или Purchase, если это так, вы можете попробовать стилизовать anchors per-se, чтобы выглядеть как кнопки.

a.btnop {
  background: #298371;
  color: white;
  line-height: 104px;
  width: 308px;
  font-size: 1.2em;
  border-radius: 5px;
  border-width: 0px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
}
<div class="top">
  <h1></h1>
</div>

<div class="top-rectangle">

</div>

<div class="top-main">
  <p class="title3"></p>
</div>

<div class="main-buttons">
  <a href="/downloads/list.php" target="_blank" class="btnop">Download</a>
  <a href="pastes" target="_blank" class="btnop">Purchase</a>
</div>
Mehdi ответил: 13 июня 2018 в 04:12

Первая причина заключается в том, что вы просто пропустили тег </a> для первой ссылки

, вторая причина заключается в том, что вы должны изменить отображение тега <a> на что-то не встроенный, чтобы дать ему возможность содержать что-то не текстовое

просто добавить display: inline-block в теги <a>

<body>

  <div class="top">
    <h1></h1>
  </div>

  <div class="top-rectangle">

  </div>

  <div class="top-main">
    <p class="title3"></p>
  </div>

  <div class="main-buttons">
    <a href="/downloads/list.php" target="_blank">
      <button type="download-button" class="btnop" style="text-align: center">Download</button>
    <!-- this is the missing closing tag --> </a>
    <a href="pastes" target="_blank">
      <button type="purchase-button" class="btnop" style="text-align: center">Purchase</button>
    </a>
  </div>

  <style>
    a {display: inline-block}
    .btnop {
      background: #298371;
      color: white;
      height: 104px;
      width: 308px;
      font-size: 1.2em;
      border-radius: 5px;
      border-width: 0px;
    }
  </style>
</body>

Дополнительное видео по вопросу: Между двумя моими кнопками в HTML / CSS есть небольшая синяя линия

HTML5 уроки для начинающих | #15 - Использование textarea и тега button

Кнопка для сайта с анимацией на CSS3

Перенос строки и горизонтальная линия в HTML. HTML-теги br и hr. #21