有人可以向我解释为什么我不能减小边框的内部宽度以使文本更加集中吗?几个小时我找不到解决方案。我是这个世界的初学者,请提供帮助。
https://i.stack.imgur.com/zRVG6.png
这是我的HTML代码:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="keywords" content="piauí fábio abreu segurança eleições">
<title>Fábio Abreu</title>
<meta property="og:title" content="Fábio Abreu">
<meta name="twitter:title" content="Fábio Abreu">
<meta name="description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta property="og:description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta name="twitter:description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta property="og:image" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta name="twitter:image" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta property="og:image:secure_url" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta property="og:image:width" content="600">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Fábio Abreu">
<meta property="og:url" content="http://www.fabioabreupi.com.br/">
<meta property="og:type" content="website">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="vpi2ZdaYpPrfr3GiW3yekW5e5L4yLKfTfcU56OPrD8jGzbLTzDbW9jk89Lge96/mnQzU4zRCbJY2MuADwoWYIw==" />
<link rel="stylesheet" media="all" href="/assets/site-dc393f9cdad26bd31342ace6c0e567e3893492c1ec06c16976bea61958ce06ad.css" />
<link rel="stylesheet" media="all" href="/assets/default/css/main-5c3e617fe669fbfd1915fd6ba42ddae97daaf842e3037fde45d55bfdd0f7b4aa.css" />
<link rel="canonical" href="http://www.fabioabreupi.com.br/">
<link rel='shortcut icon' type='image/x-icon' href='https://inovaweb-production.s3.amazonaws.com/attachment/image/original_95e76849-329a-449b-8e1b-f118083035a4.png' /> <link href='https://fonts.googleapis.com/css?family=Roboto Condensed:400,400i,700,700i' rel='stylesheet'> <style>
#TopMenu ul#menu-main li a,#TopMenu ul#menu-main li a span.caret{font-size:14px !important;text-transform:uppercase !important}
#MainHeader{background-color:rgba(0, 0, 0, 0) !important}
h3{font-size:15px !important;font-family:'Roboto Condensed' !important;font-weight:bold !important}
footer#MainFooter{background-color:rgba(255, 255, 255, 1) !important;border-color:rgba(255, 255, 255, 1) !important}
</style>
<style>#TopMenu{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2722ad+28,ff3b21+100 */
background: #2722ad; /* Old browsers */
background: -moz-linear-gradient(left, #2722ad 28%, #ff3b21 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2722ad 28%,#ff3b21 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2722ad 28%,#ff3b21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2722ad', endColorstr='#ff3b21',GradientType=1 ); /* IE6-9 */
}
#menu-main{
padding: 0px 10px 0px 9px;
margin: 0px 10px 0px 9px;
word-spacing: 0px;
}
#menu-main li:last-child{
/*padding-left: 178px;*/
margin-left: 376px;
padding-top: 0px;
margin-top: 1px;
}
#menu-main li:last-child{
/*background-color: #ffffff;
border-radius: 42px;
border-color: #ffffff;
text-indent:-3.44px;
display:inline-block;
color:#666666;
height:32px;
line-height:32px;
width:200px;
text-decoration:none;
text-align:center;
}/*.classname:hover {
background-color:#e9e9e9;
}.classname:active {
position:relative;
top:1px;*/
box-shadow:inset 0px 0px 0px 0px #none;
box-shadow:inset 0px 0px 0px 0px #none;
box-shadow:inset 0px 0px 0px 0px #none;
background-color: none;
border-radius:1px;
border-radius:1px;
border-radius: 66px;
border: 1px solid #ffffff;
display:inline-block;
color:#ffffff;
padding:1px 22px;
}
.myButton:hover {
background-color:#ff00ff;
}
.myButton:active {
position:relative;
top:0px;
}
#menu-main li:nth-last-child(2){
padding-left: 20px;
}
#menu-main li:nth-last-child(3){
padding-left: 20px;
}
#menu-main li:nth-last-child(4){
padding-left: 20px;
}
#menu-main li:nth-last-child(5){
padding-left: 20px;
}
#MainHeader{
padding: 0px 0px 0px 5px;
}
#MainFooter{
background-color: #00004d
}
#GroupList1{
background-color: #ffffff;
box-shadow: none;
}
#lws-homesection-title{
text-align: center;
}
#GroupList2{
display: none;
}
.lws-homesection-body{
font-size: 40px;
line-height: 1.8;
}</style>
</head>
<body class="palette-red">
<div id="fb-root"></div>
<header id="MainHeader">
<div class="container">
<div class="row vertical-align">
<div class="col-xs-12 col-sm-3">
<div class="LogoArea">
<a href="/" id="BrandImage">
<img src="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png" alt="Fábio Abreu" class="img-responsive center-block">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-9">
<div id="ContactsTop">
</div>
</div>
</div>
</div>
</header>
<nav id="TopMenu" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul id="menu-main" class="nav navbar-nav" data-hover="dropdown" data-animations="zoomIn">
<li><a href="/" target="">Início</a></li>
<li><a href="/categories/noticias">NOTÍCIAS</a></li>
<li><a href="/categories/fotos">FOTOS</a></li>
<li><a href="/categories/projetos">PROJETOS</a></li>
<li><a href="/biografia">BIOGRAFIA</a></li>
<li><a href="www.whatsapp.com.br">ENTRE EM CONTATO</a></li>
</ul>
</div>
</div>
</nav>
<div id="mySlide">
<div style="width:100%;" id="bf494d0c-d537-4f36-bdf2-4754dbee0839" class="inner-content-slide carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover"><ol class="carousel-indicators"><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="0" class="active"></li><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="1" class=""></li><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="2" class=""></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><div data-img-height="481" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_f5a4a97f-204c-4538-bc79-d4bed4be75f3.jpeg);background-size:cover"></div></div><div class="item "><div data-img-height="480" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_06fa6929-4e05-4d40-aebd-99233e3852d6.JPG);background-size:cover"></div></div><div class="item "><div data-img-height="488" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_471118d4-7857-496c-b0db-21d5479de784.jpg);background-size:cover"></div></div></div><a class="left carousel-control" href="#bf494d0c-d537-4f36-bdf2-4754dbee0839" role="button" data-slide="prev"><i class="icon-prev"></i><span class="sr-only">Anterior</span></a><a class="right carousel-control" href="#bf494d0c-d537-4f36-bdf2-4754dbee0839" role="button" data-slide="next"><i class="icon-next"></i><span class="sr-only">Próximo</span></a></div>
</div>
<div class="marketing">
<div class="container"><section data-section-area='V10'><div data-section='home-section' data-area='V10' data-section-id='c60fb099-5b76-4835-a254-f7ead8bde197'><div class='lws-homesection-text-image'><div class='row'><div class='col-xs-12 col-sm-12 col-md-6'><img src='https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_edab1478-6055-4a29-aa01-1fe4426e6ff2.png' class='img-responsive'></div><div class='col-xs-12 col-sm-12 col-md-6'><div class='lws-homesection-body'>Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauí em 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire. Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauí em 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.
Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauíem 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.
Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauíem 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.</div></div></div></div></div></section></div>
<div id="GroupList1">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group1">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_6310756a-7f23-4ba3-bedb-2b317c786ed3.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_6310756a-7f23-4ba3-bedb-2b317c786ed3.png" data-iw-image="image_group1" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group1">Projetos</h2>
<p data-iw-multiline="body_group1"></p>
<a data-iw-link="link_group1" class=" btn btn-primary" href="categories/projetos" role="button">Saiba mais</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group2">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_b665fc4e-f95d-4b91-9dea-138d5b287022.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_b665fc4e-f95d-4b91-9dea-138d5b287022.png" data-iw-image="image_group2" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group2">Biografia</h2>
<p data-iw-multiline="body_group2"></p>
<a data-iw-link="link_group2" class=" btn btn-primary" href="biografia" role="button">Saiba mais</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group3">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_08c91774-9593-498f-b984-e4ac21991226.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_08c91774-9593-498f-b984-e4ac21991226.png" data-iw-image="image_group3" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group3">Fotos</h2>
<p data-iw-multiline="body_group3"></p>
<a data-iw-link="link_group3" class=" btn btn-primary" href="categories/fotos" role="button">Saiba mais</a>
</div>
</div>
</div>
</div>
</div>
<div class="container"><section data-section-area='V20'><div data-section='home-section' data-area='V20' data-section-id='a40ab6b2-e909-4021-99b5-ac1ebde763d7'><h2 class='lws-homesection-title'>Notícias destaque</h2><div class='lws-homesection-resource-list'><div class='row'><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_dc88125b-b8f3-4455-bcbc-de7d9d0720ca.jpg);background-size:cover'></div><h4 class='resource-list-title'>Fábio Abreu troca PTB pelo PR e tenta reeleição a deputado federal</h4><div class='resource-list-excerpt'>No evento de filiação ao PR, Fábio Abreu anunciou sua pré-candidatura a deputado federal e afirmou que está preparado para disputar a reeleição. O ...</div><a href='/posts/fabio-abreu-troca-ptb-pelo-pr-e-tenta-reeleicao-a-deputado-federal' class='btn btn-primary'>Veja mais</a></div></div><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_d445acdc-1a7f-4b75-a96c-76f3e0cf67d3.jpg);background-size:cover'></div><h4 class='resource-list-title'>Antes de entregar cargo, Fábio Abreu apresenta Plano de Segurança</h4><div class='resource-list-excerpt'>
O documento traça uma linha de trabalho para o setor pelos próximoa s20 anos e prevê investimentos que começam com um empréstimo junto ao BNDES p...</div><a href='/posts/antes-de-entregar-cargo-fabio-abreu-apresenta-plano-de-seguranca' class='btn btn-primary'>Veja mais</a></div></div><div class="hidden-xs col-sm-12 hidden-md hidden-lg"></div><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_56e67980-ecd2-444e-a0d9-e2c8a8735420.jpg);background-size:cover'></div><h4 class='resource-list-title'>Fábio Abreu destaca falta de atenção a segurança pública</h4><div class='resource-list-excerpt'>
Em entrevista ao Acorda Piauí, o deputado federal Fábio Abreu (PR), destacou que, enquanto a falta de segurança pública é um dos problemas mais a...</div><a href='/posts/fabio-abreu-destaca-falta-de-atencao-a-seguranca-publica' class='btn btn-primary'>Veja mais</a></div></div><div class="hidden-xs hidden-sm col-md-12 col-lg-12"></div></div></div></div></section></div>
<div id="GroupList2">
<div class="container">
<div class="GL2-item" data-iw-group="group4">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group4" class="featurette-heading"></h2>
<p data-iw-multiline="body_group4" class="lead"></p>
<a data-iw-link="link_group4" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group4" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
<div class="GL2-item" data-iw-group="group5">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group5" class="featurette-heading"></h2>
<p data-iw-multiline="body_group5" class="lead"></p>
<a data-iw-link="link_group5" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group5" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
<div class="GL2-item" data-iw-group="group6">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group6" class="featurette-heading"></h2>
<p data-iw-multiline="body_group6" class="lead"></p>
<a data-iw-link="link_group6" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group6" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container"><section data-section-area='V30'></section></div>
</div>
<footer id="MainFooter">
<div class="container">
<div class="lws-home-sections-footer">
<div class="lws-1-col-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12"><section data-section-area='F10'><div data-section='home-section' data-area='F10' data-section-id='f97be27b-c0e9-4229-b584-64ee920ef08a'><img src='https://inovaweb-production.s3.amazonaws.com/attachment/image/original_3939ae3f-43d1-4f63-a724-741c5ae11f47.png' class='img-responsive'></div></section></div>
</div>
</div>
<div class="lws-2-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6"><section data-section-area='F20'></section></div>
<div class="col-xs-12 col-sm-6"><section data-section-area='F30'></section></div>
</div>
</div>
<div class="lws-4-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F40'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F50'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F60'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F70'></section></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<ul class="contacts_footer list-inline">
<li></li>
<li></li>
<li></li>
</ul>
<p>© 2018 - Fábio Abreu</p>
</div>
<div class="col-xs-12 col-sm-6">
</div>
</div>
<div class="lws-home-sections-footer">
<div class="lws-1-col-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12"><section data-section-area='F80'><div data-section='home-section' data-area='F80' data-section-id='76c13c4e-249f-4cac-b9ae-e2a56220e80c'><div class='lws-homesection-body'>Todos os direitos reservados.
</div></div></section></div>
</div>
</div>
<div class="lws-2-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6"><section data-section-area='F90'></section></div>
<div class="col-xs-12 col-sm-6"><section data-section-area='F100'></section></div>
</div>
</div>
<div class="lws-4-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F110'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F120'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F130'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F140'></section></div>
</div>
</div>
</div>
</div>
</footer>
<script src="/assets/site-fd70af901fb20b8029f75be40e0f5ff5848d5415b704279fd88ad5bc9c0ec4ec.js"></script>
<script src="/assets/default/js/main-efff309d3722bafb3f5fa5a2092f366e799cac0d724996ca31c7e52b408475ec.js"></script>
<div id="side-social-networks-loguei" role="group" class="list-unstyled btn-group-vertical">
</div>
<aside id="AVS-ContactButtons" class="force-neg-right">
<ul class="list-unstyled">
</ul>
</aside>
<script>
setTimeout(function(){
$('#AVS-ContactButtons ul li a span').css({
right: '-200px'
});
}, 4000);
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1982872918652221',
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.onload = function() { fbAsyncInit(); }
js.src = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.11&appId=1982872918652221';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
var NEWSLETTER_URL = '/fabio-abreu-1/newsletters';
var DEFAULT_ADDRESS = '';
$('.iw-contact-form').submit(function(e){
e.preventDefault();var f = $(this);$.ajax({
url:'/contact/fabio-abreu-1?authenticity_token=PEYv9F1ndM5YEDywj8kpZEV5LBE4n7ifIIRuXvvtMk1EEytCR8kGwr6DuarKQhgTtiscTD7xc9prc7e12oOlpg%3D%3D',
type:'POST',data:f.serialize(),success:function(){
var redir = $('#iw_redir_loguei_cf').length;
if (redir == 0) {alert('Email enviado com sucesso');f[0].reset();} else {
var to = $('#iw_redir_loguei_cf').val(); window.location=to;
}
},error:function(){alert('Erro ao enviar email');}
});
});
</script>
</body>
</html>
这是我现在的CSS代码:
#menu-main li:last-child{
margin-left: 376px;
padding-top: 0px;
margin-top: 1px;
}
#menu-main li:last-child{
box-shadow:inset 0px 0px 0px 0px #none;
box-shadow:inset 0px 0px 0px 0px #none;
box-shadow:inset 0px 0px 0px 0px #none;
background-color: none;
border-radius:1px;
border-radius:1px;
border-radius: 66px;
border: 1px solid #ffffff;
display:inline-block;
color:#ffffff;
padding:1px 22px;
}
.myButton:hover {
background-color:#ff00ff;
}
.myButton:active {
position:relative;
top:0px;
}
答案 0 :(得分:0)
编辑(来回评论后):
要使文本居中并让悬停效果覆盖按钮的整个内部,同时保持按钮的宽度不变,请按如下所示更改css:
当前:
#menu-main li:last-child a {
padding: 7px 19px 5px 15px;
box-sizing: border-box;
padding-border: 42px;
}
#menu-main li:last-child {
box-shadow: inset 0px 0px 0px 0px #none;
box-shadow: inset 0px 0px 0px 0px #none;
box-shadow: inset 0px 0px 0px 0px #none;
background-color: none;
border-radius: 8px;
border-radius: 8px;
border-radius: 66px;
border: 1px solid #ffffff;
display: flex;
color: #ffffff;
padding: 0px 20px;
text-align: center justify-content:center;
align-items: center;
height: 40px;
line-height: 0px;
width: 200px;
box-sizing: border-box;
}
更改为(删除按钮和文本上的填充,在文本上放置边框半径,将文本的宽度和高度设置为与按钮相同,并且我还删除了没有做任何事情/写错了的东西)
新功能:(将width: 100%
添加到导航栏,并向float: right
的媒体查询添加768px
或以上的屏幕上的按钮):
#menu-main {
width: 100%;
}
#menu-main li:last-child a {
padding: 0px;
line-height: 40px;
border-radius: 66px;
height: 100%;
width: 100%;
}
#menu-main li:last-child {
border-radius: 66px;
border: 1px solid #ffffff;
text-align: center;
height: 40px;
width: 175px;
margin-left: 20px;
margin-top: 5px;
margin-bottom: 5px;
}
@media only screen and (min-width: 768px) {
#menu-main li:last-child {
float: right;
}
}
http://res.cloudinary.com/maxmaxs5/image/upload/v1533423313/Test.png
很高兴提供帮助!
我相信您要更改此部分的填充值吗?:
#menu-main li:last-child{
box-shadow:inset 0px 0px 0px 0px #none;
box-shadow:inset 0px 0px 0px 0px #none;
box-shadow:inset 0px 0px 0px 0px #none;
background-color: none;
border-radius:1px;
border-radius:1px;
border-radius: 66px;
border: 1px solid #ffffff;
display:inline-block;
color:#ffffff;
//padding:1px 22px;
padding:1px 10px;
}
您可能想弄弄第二个像素值,直到获得所需的值,但可能是10px。.padding:1px 10px;
设置padding
时,第一个值是上/下,第二个值是左/右。因此,调整第二个值将改变文本两侧的填充量。
希望这会有所帮助,如果您有任何疑问,请告诉我!
答案 1 :(得分:0)
您出了什么问题,无需两次编写规则:
#menu-main li:last-child{
box-shadow:inset 0px 0px 0px 0px #none;
box-shadow:inset 0px 0px 0px 0px #none;
box-shadow:inset 0px 0px 0px 0px #none;
background-color: none;
border-radius:1px;
border-radius:1px;
border-radius: 66px;
border: 1px solid #ffffff;
display:inline-block;
color:#ffffff;
padding:1px 22px;
}
您可以使用:
button{
text-align:center
}
或使用将display flex添加到包装元素的居中子元素:
div{
display:flex;
justify-content:center;
align-items:center;
}