如何减少表格单元格内按钮的宽度？
我想减小按钮的大小以匹配文本的大小。我指的是：
1）蓝色按钮“ Pagar con Tarjeta”和
2）到橙色按钮“ Pagar con Efectivo”。
我已将width60类应用于button元素，即width:60%类。
但是它不起作用。
1 个答案:
答案 0 :(得分：1)
一种方法可以是将一个按钮包装在div中，并留出一定的余量以实现所需的效果
<div class="tops">
<button id="buyButton" class="btn-azul my_custom_btn margin-bottom2 width60">Pagar con Tarjeta</button>
</div>
<button id="depositButton" class="btn-naranja my_custom_btn width60" checked>Pagar con Efectivo</button>
是的，因为div是一个块元素，导致另一个按钮按下
然后像这样定义.tops（用于下边距）
.tops{
margin-bottom:10px;
}
此外，请记住，display:inline-block和width:auto根据div中的内容以及每个元素来构成div。因此，对于您的按钮，我只是这样做了。
.width60 {
width: auto !important;
display:inline-block !important;
}
!important覆盖其他CSS规则。要在两个按钮上实现相同的宽度，只需将width:auto更改为类似
.width60 {
width: 55% !important;
display:inline-block !important;
}
代码变成这样
/* BOTONES */
.as-console-wrapper { display:none !important; }
button.btn-azul {
text-decoration: none;
background-color: #5ba4e6;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border: none;
}
.width60 {
width: 55% !important;
display: inline-block !important;
}
button.btn-azul:hover {
text-decoration: none;
background-color: #6DB3F0;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border: none;
}
button.btn-naranja {
text-decoration: none;
background-color: #ffa31a;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
margin-top: -10px;
font-weight: 700;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border: none;
}
button.btn-naranja:hover {
text-decoration: none;
background-color: #FFAC2F;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border: none;
}
.tops {
margin-bottom: 10px;
}
button.btn:focus {
outline: none;
}
.width40 {
width: 40%
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Stickers Gallito Perú">
<meta name="google-site-verification" content="fGkwUY2RcijkVzB6DiwIuAToP1y5xw8ECXQQabRAOIM" />
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/custom.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/home.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/navbar.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/header.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/preloader.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/loader.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/footer.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/size-quantity-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/gallito_favicon.png" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/js/footer.js"></script>
<script src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/js/size-quantity.js"></script>
<!-- Incluyendo Culqi Checkout -->
<script src="https://checkout.culqi.com/js/v3"></script>
<title>Stickers Gallito</title>
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-TPXWL88');
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TPXWL88"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="general-container">
</div>
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<a class="navbar-brand" href="/">  <img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/stickers_gallito_logo.png" width="20px" height="30px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/stickers">Stickers <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/carrito_de_compras/"><i class="fas fa-shopping-cart"
style="color:white !important;"></i> ( 3)</a>
</li>
<li class="nav-item active">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user-circle"></i> ogonzales</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="/ordenes/historial_de_compras/" class="dropdown-item">Historial de compras</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="/salir/">Salir <i class="fas fa-sign-out-alt"></i></a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<script>
Culqi.publicKey = 'pk_live_6qebYEJ2CZ82DsGU';
</script>
<script>
Culqi.settings({
title: 'Stickers Gallito Store',
currency: 'PEN',
description: 'Stickers varios',
amount: 67900
});
</script>
<div class="container">
<br>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h1 class="text-center my_title">
Tu carrito de compras
</h1>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 text-center">
<table class="table my_custom_table">
<thead class="my_custom_thead">
<tr>
<th colspan="5">
Tus items
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="cart_item.product.get_absolute_url"><img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/product_images/pug3.jpg" alt="" class="float-left rounded" width="90" height="90"></a>
</td>
<td class="text-left">
<b>Stickers semitroquelados</b>
<br> Tamaño: 5cm x 5cm
<br> Cantidad: 1000
</td>
<td>
S/650
<a href="/carrito_de_compras/full_remove/6/" class="custom_icon"><i
class="fas fa-trash-alt custom_icon"></i></a>
</td>
</tr>
<!-- MOSTRAR SAMPLE_ITEMS IN CART_DETAIL -->
<tr>
<td>
<a href="cart_item.product.get_absolute_url"><img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/sample_images/cat.png" alt="" class="float-left rounded" width="90" height="90"></a>
</td>
<td class="text-left">
<p class="margin-bottom0"><b>Sobre con muestras</b></p>
<p class="margin-top0 margin-bottom0">Cantidad: 5 stickers</p>
<p class="margin-top0 margin-bottom0">Tamaño: varios</p>
</td>
<td>
<p>S/5
<a href="/carrito_de_compras/full_remove_sample/41/" class="custom_icon"><i class="fas fa-trash-alt custom_icon"></i></a>
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<a href="cart_item.product.get_absolute_url"><img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/sample_images/pug3.jpg" alt="" class="float-left rounded" width="90" height="90"></a>
</td>
<td class="text-left">
<p class="margin-bottom0"><b>Stickers redondeados de muestra</b></p>
<p class="margin-top0 margin-bottom0">Cantidad: 10 stickers</p>
<p class="margin-top0 margin-bottom0">Tamaño: 13cm x 13cm</p>
</td>
<td>
<p>S/9
<a href="/carrito_de_compras/full_remove_sample/42/" class="custom_icon"><i class="fas fa-trash-alt custom_icon"></i></a>
</p>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 text-center">
<table class="table my_custom_table">
<thead class="my_custom_thead">
<tr>
<th>
Checkout
</th>
</tr>
</thead>
<tboyd>
<tr>
<td>
Por favor, revise su Carrito de Compras antes de proceder con el pago de la orden
</td>
</tr>
<tr>
<td class="text-left">
<div class="row">
<div class="col-6">
Total: S/664<br> Costo de envío: S/15<br> Descuento: <span class="savings"><b>S/0</b></span><br> A pagar: <strong>S/679</strong><br>
</div>
<div class="col-6">
<br>
<input type="text" id="user_cupon" style="display: inline-block; height: 36px;" placeholder="Ingrese cupón">
<button type="submit" class="btn btn-secondary" id="cuponButton" style="display: inline-block; height: 35px;">Enviar</button>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-left">
<b>Dirección de envío:</b>
<select type="text" id="ShippingAddress">
<option value="" selected>
</option>
<option value="">
</option>
</select>
</td>
</tr>
<!-- <tr>
<td class="text-left">
<b>Seleccione método de pago:</b>
<br>
<p></p>
<input class="pago-tarjeta" type="radio" name="radioName" value="1" /> Pago con Tarjeta de
Crédito o Débito
<br>
<input class="pago-deposito" type="radio" name="radioName" value="2" checked />
Depósito en efectivo
<br>
<br>
<p class="pago-deposito-detalle"><i>Después de dar click en el botón de Pagar,
se le mostrarán <b>las cuentas bancarias</b> a las cuales deberá depositar.</i>
</p>
</td>
</tr> -->
<tr>
<td>
<div class="tops"><button id="buyButton" class="btn-azul my_custom_btn margin-bottom2 width60">Pagar con Tarjeta
</button></div>
<button id="depositButton" class="btn-naranja my_custom_btn width60" checked>Pagar con
Efectivo
</button>
<br>
<br>
<a href="/" class="width60 btn btn-secondary btn-block my_custom_btn">Seguir
comprando</a>
</td>
</tr>
</tboyd>
</table>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？