Css 在页面上放置按钮的问题_Css_Button

Css 在页面上放置按钮的问题

css button

Css 在页面上放置按钮的问题,css,button,Css,Button,我对下面的代码有几个问题 1）我去Twitter网站获取嵌入“Tweet”按钮的代码，但有两个问题-a）按钮只是显示为链接，b）我预先加载到Tweet框中的文本没有显示 2）我希望这两个黄色按钮在页面上居中，彼此相邻。有人能帮忙定位吗 3）我可以去掉按钮内文本的超链接吗？现在，这个链接只有在你点击文本的时候才有效（我希望它在你点击按钮的任何地方都有效）非常感谢你的帮助。谢谢 <!-- doc type declaration lets browser know which xhtm

我对下面的代码有几个问题

1）我去Twitter网站获取嵌入“Tweet”按钮的代码，但有两个问题-a）按钮只是显示为链接，b）我预先加载到Tweet框中的文本没有显示

2）我希望这两个黄色按钮在页面上居中，彼此相邻。有人能帮忙定位吗

3）我可以去掉按钮内文本的超链接吗？现在，这个链接只有在你点击文本的时候才有效（我希望它在你点击按钮的任何地方都有效）

非常感谢你的帮助。谢谢

<!-- doc type declaration lets browser know which xhtml doc type declaration we are using -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title>SAMPLE TEXT</title>
</head>

<style type="text/css">


#wtf_title {font-family: "Garamond"; font-weight: bold; font-size: 200%; padding-top:50px}

#intro_text {font-family: "Helvetica", serif; color: black; padding-top:10px; 
font-style: italic;}

#reason {font-family: "Helvetica", serif; color: white; padding-top:50px; padding-bottom:50px;}

#credit 
{
    font-family: "helvetica"; 
    font-size: 20%; 
    color: black; 
    }

#button1 {padding-left:20px;}

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0      rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

button:active{position:absolute;top:100px; left:50px}

</style>


<body>

<div id="wtf_title" >
<center>sample text<br/>
</div>

<hr noshade size=8 width="53%">

<div id="intro_text" >
<center>Sample text
</div>

<button>
<center><a href="" class="button1">sample text</a>
</button>

<button>
<a target="_blank" href="http://www.americanbar.org" class="button2">sample text</a>    
</button>

<div id="twitter-share-button"; style="position: absolute; top: 2px;" >
<a href="https://twitter.com/share" class="twitter-share-button" data- url="http://www.whatthefuckhaslebronjamesdone.com" data-text="Check this out:" data- count="none" data-hashtags="WTFLBJ">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.in sertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div id="fb_share"; style="position: absolute; top: 2px; left: 90px;" >
<a name="fb_share"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
    type="text/javascript">
</script>
</div>


<div id="credit"; style="position: absolute; bottom: 5px; left: 32%;" >
This site was created by <a href="http://www.twitter.com/varunsshetty">Varun Shetty</a> and    <a href="http://www.twitter.com/bcfromblo">Bobby Corp</a>. Inspired by LBJ and <a href="http://www.whatthefuckhasobamadonesofar.com">WTF Obama</a>. Bobby loves Lebron; Varun loves the idea of Lebron.
</div>

</body>

</html>


示例文本
#wtf_标题{字体系列：“Garamond”；字体大小：粗体；字体大小：200%；顶部填充：50px}
#简介文字{字体系列：“Helvetica”，衬线；颜色：黑色；顶部填充：10px；
字体样式：斜体；}
#原因{字体系列：“Helvetica”，衬线；颜色：白色；顶部填充：50px；底部填充：50px；}
#功劳
{
字体系列：“helvetica”；
字体大小：20%；
颜色：黑色；
}
#按钮1{左填充：20px；}
钮扣{
颜色：#08233e；
字体：2.4em Futura，“世纪哥特式”，AppleGothic，无衬线；
字体大小：70%；
填充：14px；
背景：url（overlay.png）repeat-x center#ffcc00；背景颜色：rgba（255204,0,1）；
边框：1px实心#ffcc00；
-moz边框半径：10px；-webkit边框半径：10px；边框半径：10px；
边框底部：1px实心#9f9f；
-moz盒阴影：插入0 1px 0 rgba（255255,0.5）；-webkit盒阴影：插入0 1px 0 rgba（255255,0.5）；盒阴影：插入0 1px 0 rgba（255255,0.5）；
光标：指针；
}
按钮：悬停{背景色：rgba（255204,0,0.8）；}
按钮：活动{位置：绝对；顶部：100px；左侧：50px}
示例文本


示例文本
!函数（d，s，id）{var js，fjs=d.getElementsByTagName（s）[0]；if（！d.getElementById（id））{js=d.createElement（s）；js.id=id；js.src=“//platform.twitter.com/widgets.js”；fjs.parentNode.in sertBefore（js，fjs）；}（文档，“脚本”，“twitter wjs”）；
和灵感来源于LBJ和。Bobby爱勒布朗；Varun喜欢勒布朗的想法。

您的HTML在很多地方都是无效的，在发布到这里之前，您确实需要将HTML通过WC3验证程序，这将为您节省大量时间和精力

下面是一个JSFIDLE，让您开始：

要使整个按钮能够单击，您需要创建一个适当的submit/button元素或样式a href，使其看起来像一个按钮。

不确定这是否导致了您的特定问题，但不允许在元素上方有任何内容。这将导致浏览器以怪癖模式渲染页面，然后会出现各种各样的疯狂。你的解决办法是把按钮放在页面中间，但是它有一个怪异的副作用，包括三个随机字符在页面上，而且我似乎无法摆脱：一个小写字母A，上面有插入符号。一个欧元符号和一个括号。