我想添加一个列表项但是它被删除了，因为我在我的css文件中添加了display：inline-block，但是我无法改变它，因为这对于按照我想要的方式调整我的内容至关重要。我尝试了很多东西，但它只是表示：L，有人有任何想法吗？这是小提琴：
http://jsfiddle.net/rupsdino1997/gtxe6ojo/1/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});hr { /* taken from http://css-tricks.com/examples/hrs/ */
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr:before { /* taken from http://css-tricks.com/examples/hrs/ */
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
ul.listing {
list-style:armenian;
}
body {
margin: 0px;
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: #EFF5F8;
}
#slideshow {
position:relative;
right: 280px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#wrapper {
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
border:#6627C9;
background-color:#E2CFAF;
padding-left: 17px;
padding-right: 17px;
}
#slideshow img {
min-width: 740px;
min-height: 400px;
}
#top {
overflow: hidden;
}
h1 {
font-size: 65px;
margin-top: 0px;
margin-bottom: 14px;
color: #3399DD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
max-width: 100%;
text-align: center;
}
#mainimg img {
max-width: 100%;
padding-top: 2px;
padding-bottom: 2px;
}
h1{
color: #3399CC;
font-weight: 600;
font-size: 36px;
}
.centered {
margin-left: auto;
margin-right: auto;
}
footer {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2%;
background-color: #43a6cb;
color: #FFFFFF;
position: relative;
bottom: 0px;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
a:visited {
color: #FF944C;
}
#mainnav a:hover ,#mainnav a:active,#mainnav a:focus , #mainnav a.thispage{
color: #FFFFFF;
text-decoration: none;
background-color: #43A6CB;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainnav a {
width: 20%;
background-color: #4D4D4D;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
padding-top: 6px;
padding-bottom: 6px;
display: block;
float: left;
}
#wrapper #main .horizontal img {
height: 250px;
width: 200px;
margin-top: 15px;
}
#wrapper #main ul.horizontal li {
display: inline-block;
font-size: 16px;
padding: 1em;
text-align: justify;
vertical-align: top;
width: 50%;
}
ul.horizontal {
list-style:circle;
margin: 0;
padding: 0;
font-size: 0;
}
img{
display: block;
}
*
{
box-sizing: border-box;
}
#main {
padding-left: 10px;
paddin-right: 10px;
}
.listing {
display:list-item;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<header id="top">
<h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
<nav id="mainnav">
<ul>
<li><a href="Index.html" class="thispage">Home</a></li>
<li><a href="Properties Features.html">Features</a></li>
<li><a href="Activities.html">Activities</a></li>
<li><a href="Contact.html">Contact US</a></li>
<li><a href="Pricing.html">Pricing</a></li>
</ul>
</nav>
</header>
<article id="main">
<ul class="horizontal" style=" padding:0">
<li>
<div style="position:relative; left: 10px">
<p style="padding-bottom: 0pt; padding-top: 0pt; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:100px; position:relative; top:8px; color:#3D2E16; font-size:15px;">
<ul class="listing" style="padding-left:0px">
<li>Living Room</li>
<li>Library</li>
<li>oo</li>
<li>ff</li>
<li>ff</li>
<li>ff</li>
<li>ff</li>
<li>ff</li>
</ul>
</p>
</div>
</li>
<li>
<div id="slideshow">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" width="1000">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" class="active">
</div>
</li>
</ul>
<hr width="80%">
<p style="margin: 0px 16px 30px 17px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:100px; position:relative; left: 10px; color:#3D2E16; font-size:15px; padding-right: 20px; text-align:justify"> The house has been entirely renovated with respect for the original elements like stone walls, and wooden beams. This 5 bedroom house (sleeps 8) is a well equipped property. Situated in one of the most sunny regions of France it profits from a sunny, sheltered court yard and garage in the basement.
This comfortable property is based in the Languedoc-Roussillon region, famous for its recreational activities as here in Cathar country history meets nature. From the village you can reach famous historic towns such as Perpignan, Carcassonne and Narbonne within an hour. Felines is also close to the medieval village of Lagrasse, one of the “les plus beaux villages de France”. A drive to the sea or Spain equally takes you about an hour. Take advantage of your stay and visit some vintners, as Felines-Termenes is on the “Route des 20”, a local initiative of the wine growers of the Corbieres. With your family or with friends, you will appreciate the calm of this 180 sq.m. property. </p>
</article>
<footer>Powered By Ruben © 2015 </footer>
</div>