Разверните кнопку до размера своего якорного контейнера - PullRequest
Новая
       1

Разверните кнопку до размера своего якорного контейнера

0 голосов
/ 06 февраля 2020

Мне нужно составить список кнопок, чтобы сделать ссылку на страницы в документе. Я не могу сделать кнопку внутри якоря, чтобы развернуть ее до полного содержимого

Даже если я добавлю 

.linkbutton {
  display: block;
  min-width: 100%;
}

размер кнопки, она по-прежнему ограничена текстом внутри нее. Что я делаю не так? 

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination > li > a {
    color: #95b047;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.linkbutton {
    background: none;
    color: #95b047;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
</style>
<ul class="pagination">
  <li><a>
   <input type="submit" class="linkbutton" name="page" value="1"></a></li>
  <li class="active"><a>2</a></li>
</ul>

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

Попробуйте это- 

.pagination {
    display: block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li {
    width: 34px;
    height: 36px;
    display: inline-block;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 0;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.linkbutton {
    background: none;
    color: #95b047;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
}
0 голосов
/ 06 февраля 2020 

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .pagination {
      display: inline-block;
    }
    
    .pagination a {
      color: black;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
    }
    
    .pagination a.active {
      background-color: #0095ff;
      color: white;
    }
    
    .pagination a:hover:not(.active) {background-color: #ddd;}
    </style>
    </head>
    <body>
    
    <h2>Active and Hoverable Pagination</h2>
    <p>Move the mouse over the numbers.</p>
    
    <div class="pagination">
      <a href="#">&laquo;</a>
      <a href="#">1</a>
      <a class="active" href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      <a href="#">&raquo;</a>
    </div>
    
    </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...