个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我在这里制作了一个示例投票系统:Sample Voting System
然而，在反复尝试之后，我无法按照我想要的方式设置样式，因为开发人员在这里使用了太多的 div。要么字体太大，要么与数字重叠，要么不成比例，等等。
我希望它看起来像这样:
这是我的代码:
<!DOCTYPE html>
<head>
<title>Sample Polling System</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
else
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
</script>
<style type="text/css">
body
{
font-family:'Georgia', Times New Roman, Times, serif;
}
#main
{
height:100px;
width:800px;
}
a
{
color:#DF3D82;
text-decoration:none;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
.up
{
height:40px; font-size:24px; text-align:center; background-color:gray; margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.up a
{
color:#FFFFFF;
text-decoration:none;
}
.up a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.down
{
height:40px; font-size:24px; text-align:center; background-color:gray; margin-top:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.down a
{
color:#FFFFFF;
text-decoration:none;
}
.down a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.box1
{
float:left; height:80px; width:50px;
}
.box2
{
float:left; width:440px; text-align:left;
margin-left:10px;height:60px;margin-top:10px;
font-size:18px;
}
img
{
border:none;
padding-top:7px;
}
</style>
</head>
<body>
<div align="center">
<h3>Sample Polling System</h3><hr>
<?php
include('config.php');
$sql=mysql_query("SELECT * FROM Messages LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$down=$row['down'];
?>
<div id="main">
<div class="box1">
<div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a><!--Tried placing here, didn't work--></div>
<div class='down'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="down"><?php echo $down; ?></a></div>
</div><!-- tried to put this box below box2 but still didn't work -->
<div class='box2' ><?php echo $msg; ?></div>
</div><!-- tried atleast 10 permutations and combinations, couldn't get it work-->
<hr>
<?php
}
?>
</div>
</body>
</html>
请帮我得到我想要达到的效果。
谢谢
最佳答案
我修改了你的代码:
<!DOCTYPE html>
<head>
<title>Sample Polling System</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
else
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
</script>
<style type="text/css">
body
{
font-family:'Georgia', Times New Roman, Times, serif;
}
#main
{
width:800px;
overflow:hidden;
}
a
{
color:#DF3D82;
text-decoration:none;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
.up
{
height:40px; font-size:24px; text-align:center; background-color:gray; margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px; float:left; width:40px;
}
.up a
{
color:#FFFFFF;
text-decoration:none;
}
.up a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.down
{
height:40px; font-size:24px; text-align:center; background-color:gray; margin-top:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px; float:left; margin-left:40px; width:40px;
}
.down a
{
color:#FFFFFF;
text-decoration:none;
}
.down a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.box1
{
float:left; clear:both;
}
.box2
{
float:left; width:440px; text-align:left;
font-size:18px;
}
img
{
border:none;
padding-top:7px;
}
</style>
</head>
<body>
<div align="center">
<h3>Sample Polling System</h3><hr>
<?php
include('config.php');
$sql=mysql_query("SELECT * FROM Messages LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$down=$row['down'];
?>
<div id="main">
<div class='box2' ><?php echo $msg; ?></div>
<div class="box1">
<div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a></div><span style="margin-top:10px; float:left; margin-left:10px;">People Agree to This</span>
<div class='down'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="down"><?php echo $down; ?></a></div><span style=" margin-top:10px; float:left; margin-left:10px;">People Disagree to This</span>
</div><!-- tried to put this box below box2 but still didn't work -->
</div><!-- tried atleast 10 permutations and combinations, couldn't get it work-->
<hr>
<?php
}
?>
</div>
</body>
</html>
检查一下 http://jsfiddle.net/qCwZd/
#box2 是标题放在#box1上面，我给了它一个float:left;和#box1 得到一个 float:left; 和一个 clear:both; 所以它可以显示在一个新行上。
我在每个灰色框旁边添加了一个span，第一个是People agree to this，其他People disagree to this，他们是给定一个 float:left; 放在灰色框旁边，还有一些 margin-left。我删除了一些 height 属性。
关于php - 设计投票系统，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14535168/
25
4
0
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
.NET 框架:4.5.1 我在 Blend for visual studio 2015 中遇到一个奇怪的错误，我找不到它的来源。 如果我在 VS 中打开我的 WPF 解决方案，它会加载并运行良好。
我经常遇到这样的问题，与 Hierarchical RESTful URL design 非常相似 假设该服务仅提供用户上传文档。 POST, GET /accounts PUT, DELETE /a
在 Rails 应用程序中，我使用 devise 来管理我的用户，而我用来销毁 session 的链接不再有效。它正在工作，现在我添加了事件管理员，但没有。 我的链接是 :delete, :clas
我已经坚持了超过 24 小时，试图按照此处发布的其他解决方案进行操作，但我无法使其正常工作。我是 Rails 新手，需要帮助! 我想让我的/users/edit 页面正常工作，以便我可以简单地更改用户
Devise 在以下情况下不会使用户超时: 用户登录，关闭选项卡，然后在超时 + X 分钟内重新访问该 URL。用户仍处于登录状态。 如果选项卡已打开并且稍后刷新/单击，则超时可以正常工作。这意味着
我想使用这样的 slider 我希望该 slider 根据提供给它的值进行相应调整。到目前为止，我只能应用具有渐变效果的背景，但无法获得这种效果。请通过提供样式代码来帮助我。
您应该为每种方法创建一个请求/响应对象，还是应该为每个服务创建一个？ 如果我在所有方法中使用它，我的服务请求对象中将只有 5 个不同的东西，因为我对几乎所有方法使用相同的输入。 响应对象将只有一个字典
我正在尝试在 REST 中对实体的附件进行建模。假设一个缺陷实体可以附加多个附件。每个附件都有描述和一些其他属性(上次修改时间、文件大小...)。附件本身是任何格式的文件(jpeg、doc ...)
我有以下表格: Blogs { BlogName } BlogPosts { BlogName, PostTitle } 博客文章同时建模一个实体和一个关系，根据 6nf(根据第三个宣言)这是无效的。
如果 A 类与 B、C 和 D 类中的每一个都有唯一的交互，那么交互的代码应该在 A 中还是在 B、C 和 D 中？ 我正在编写一个小游戏，其中许多对象可以与其他对象进行独特的交互。例如，EMP点击
关于如何记住我与 Omniauth 一起工作似乎有些困惑。 根据这个wiki ，您需要在 OmniauthCallbacksController 中包含以下内容: remember_me(user)
设计问题: 使用 非线程安全 组件(集合，API，...)在/带有 多线程成分 ... 例子 : 组件 1 :多线程套接字服务器谁向消息处理程序发送消息... 组件 2 :非线程安全 消息处理程序 谁
我们目前正在设计一个 RESTful 应用程序。我们决定使用 XML 作为我们的基本表示。 我有以下关于在 XML 中设计/建模应用程序数据的问题。 在 XML 中进行数据建模的方法有哪些？从头开始然
我正在设计一个新的 XSD 来从业务合作伙伴那里获取积分信息。对于每笔交易，合作伙伴必须提供至少一种积分类型的积分值。我有以下几点:
设计支持多个版本的 API 的最佳方法是什么。我如何确保即使我的数据架构发生更改(微小更改)，我的 api 的使用者也不会受到影响？任何引用架构、指南都非常有用。 最佳答案 Mark Nottingh
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
我想用 php 创建一个网站，其工作方式与 https://www.bitcoins.lc/ 相同。确实，就每个页面上具有相同布局但内容会随着您更改链接/页面而改变而言，我如何在 php 中使用lay
我有一个关于编写 Swing UI 的问题。如果我想制作一个带有某些选项的软件，例如在第一个框架上，我有三个按钮(新建、选项、退出)。 现在，如果用户单击新按钮，我想将框架中的整个内容更改为其他内容。
我正在尝试找出并学习将应用程序拥有的一堆Docker容器移至Kubernetes的模式和最佳实践。诸如Pod设计，服务，部署之类的东西。例如，我可以创建一个其中包含单个Web和应用程序容器的Pod，但
我是一名优秀的程序员,十分优秀！