我有一个 <div>元素，包含 <ul>四个<li>元素。我需要做的是设置 <li>以水平方向显示，并在 <div> 内.当我将 JTouch class=toolbar 应用到我的 <div> 时，然而我看到的是 <li>元素甚至没有出现在 <ul> 的范围内和<ul>和 <li>似乎移出 parent <div> .请问我该如何解决这种情况？
Image of problem (Bottom right are the list elements instead of appearing within the div and ul)
<html>
<head>
<style type="text/css" media="screen">
@import "../../jqtouch/jqtouch.css";
</style>
<style type="text/css" media="screen">
@import "../../themes/apple/theme.css";
</style>
<script src="../../jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<!--
Tweet consumption in progress:
-->
<link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
<!--
Initialization:
-->
<script type="text/javascript" charset="utf-8">
$.jQTouch({
icon: 'icon.png',
startupScreen: 'img/startup.png'
});
</script>
<style type="text/css">
.toolbar2
{
background: green;
height: 30;
}
#toolbarbottom ul li
{
display:inline;
float: left;
padding: 3px 5px;
}
#toolbarbottom ul
{
background-color: Green;
background-color: Purple;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var ulhtml = "<ul>";
$.getJSON("http://twitter.com/status/user_timeline/AJEnglish.json?count=20&include_entities=true&callback=?", function (data) {
$.each(data, function (i, item) {
ulhtml += "<li class='arrow'>" + item.text + "</li>";
});
ulhtml += "</ul>";
$("#tweets").html(ulhtml);
});
});
</script>
</head>
<body>
<div id="jqt">
<div id="home">
<div id="toolbartop" class="toolbar">
<h2>
Tweet </h2>
<a href="#add" class="button"> +</a>
</div>
<h2>
Most Recent Tweet</h2>
<div id="tweets">
</div>
<div id="toolbarbottom" class="toolbar" style="position: fixed; bottom: 0px; left: 0px;
width: 100%;">
<div style="background-color:Black;">
<ul >
<li id="active"><a id="current" href="#add" class="button">News</a></li>
<li><a href="#add" class="button">Updates</a> </li>
<li><a href="#add" class="button">Contact Us</a></li>
<li><a href="#add" class="button">Website</a> </li>
</ul>
</div>
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
<div id="info">
<div class="toolbar">
<h1>
About</h1>
<a href="#add" class="cancel">Cancel</a>
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
</div>
</body>
</html>
最佳答案
将所有的 li 向左浮动并给它们填充。
我用 html 实现它。查看并相应地更改您的代码。
<style type="text/css">
.toolbar ul li{float:left; padding:3px 5px;}
.toolbar ul {list-style-type:none;
</style>
关于javascript - 如何在 JQTouch 工具栏 div 中水平显示列表元素(可能使用 CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6501712/