基本上,我在网页设计中使用了这些按钮。但是我刚刚注意到在更改背景时他们在按钮后有这个奇怪的破折号 (-)。
CSS:
* {
font-family: 'Caviar Dreams';
}
.button-fill {
text-align: center;
background: #ccc;
display: inline-block;
position: relative;
text-transform: uppercase;
margin: 25px;
border:dashed 0px #000000;
-moz-border-radius-topleft: 17px;
-moz-border-radius-topright:17px;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-bottomright:17px;
-webkit-border-top-left-radius:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
-webkit-border-bottom-right-radius:17px;
border-top-left-radius:17px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius:17px;
}
.button-fill.orange {
background: #B26B24;
color: #fff;
}
.button-fill.orange .button-inside {
color: #f26b43;
}
.button-text {
padding: 0 25px;
line-height: 56px;
letter-spacing: .1em;
}
.button-inside {
width: 0px;
height: 54px;
margin: 0;
float: left;
position: absolute;
top: 1px;
left: 50%;
line-height: 54px;
color: #445561;
background: #0033CC;
text-align: center;
overflow: hidden;
-webkit-transition: width 0.5s, left 0.5s, margin 0.5s;
-moz-transition: width 0.5s, left 0.5s, margin 0.5s;
-o-transition: width 0.5s, left 0.5s, margin 0.5s;
transition: width 0.5s, left 0.5s, margin 0.5s;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
}
.button-inside.full {
width: 100%;
left: 0%;
top: 0;
margin-right: -50px;
border: 1px solid #445561;
}
.inside-text {
text-align: center;
position: absolute;
right: 50%;
letter-spacing: .1em;
text-transform: uppercase;
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
我认为以下代码是问题所在,它位于 .button-fill 下。
display: inline-block;
我已经尝试删除它,更改它,但是它会阻止按钮工作。我已经走到了尽头。有谁知道我将如何解决这个问题?还是按钮需要重新设计?
奇怪破折号的图片:
HTML代码:
<CENTER>
<div class="mywork" id="portfolio">
<a href="./forum/">
<div class="button-fill orange">
<div class="button-text">Outside text</div>
<div class="button-inside">
<div class="inside-text">inside text </div>
</div>
</div>
</a>
<a href="#">
<div class="button-fill orange">
<div class="button-text">Outside text</div>
<div class="button-inside">
<div class="inside-text">Inside Text </div>
</div>
</div>
</a>
</div>
</CENTER>
最佳答案
破折号是由于<a>
默认样式。
您可以添加属性 text-decoration: none;
给你的a
选择器。
关于html - 按钮后的 CSS 怪异破折号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29543596/