在html-5 bsed主题中从左向右移动侧栏
在html-5 bsed主题中从左向右移动侧栏
提问于 2018-06-26 01:24:30
我已经下载了一个基于HTML5的主题。但我希望侧边栏是在骑行道的一侧。下面是与页面侧边栏相对应的HTML代码和CSS。
我试着用代码把侧边栏移到右边，但是我做不到。
我可以张贴整个HTML代码，如果需要。
#sidebar {
margin-right: 3em;
min-width: 22em;
width: 22em;
float: right;
}
#sidebar>* {
border-top: solid 1px rgba(160, 160, 160, 0.3);
margin: 3em 0 0 0;
padding: 3em 0 0 0;
float: right;
}
#sidebar> :first-child {
border-top: 0;
margin-top: 0;
padding-top: 0;
float: right;
}
@media screen and (max-width: 1280px) {
#sidebar {
border-top: solid 1px rgba(160, 160, 160, 0.3);
margin: 3em 0 0 0;
min-width: 0;
padding: 3em 0 0 0;
width: 100%;
overflow-x: hidden;
float: right;
}
}
<html>
<head>
<title>Future Imperfect by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<header id="header">
<h1><a href="index.html">Future Imperfect</a></h1>
<nav class="links">
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Feugiat</a></li>
<li><a href="#">Tempus</a></li>
<li><a href="#">Adipiscing</a></li>
</ul>
</nav>
<nav class="main">
<ul>
<li class="search">
<a class="fa-search" href="#search">Search</a>
<form id="search" method="get" action="#">
<input type="text" name="query" placeholder="Search" />
</form>
</li>
<li class="menu">
<a class="fa-bars" href="#menu">Menu</a>
</li>
</ul>
</nav>
</header>
<!-- Header -->
<!-- Menu -->
<section id="menu" float="right">
<!-- Search -->
<section>
<form class="search" method="get" action="#">
<input type="text" name="query"
placeholder="Search" />
</form>
</section>
<!-- Links -->
<section>
<ul class="links">
<li>
<a href="#">
<h3>Lorem ipsum</h3>
<p>Feugiat tempus veroeros dolor</p>
</a>
</li>
<li>
<a href="#">
<h3>Dolor sit amet</h3>
<p>Sed vitae justo condimentum</p>
</a>
</li>
<li>
<a href="#">
<h3>Feugiat veroeros</h3>
<p>Phasellus sed ultricies mi
congue</p>
</a>
</li>
<li>
<a href="#">
<h3>Etiam sed consequat</h3>
<p>Porta lectus amet ultricies</p>
</a>
</li>
</ul>
</section>
<!-- Actions -->
<section>
<ul class="actions stacked">
<li><a href="#" class="button large fit">Log
In</a></li>
</ul>
</section>
</section>
<!-- Main -->
<div id="main">
<!-- Post -->
<!-- <!-- Post -->
<article class="post">
<header>
<div class="title">
<h2><a href="single.html"><?php echo
"$title"; ?>
</div>
<div class="meta">
<time class="published" datetime="2015-
10-25">October 25, 2015</time>
<a href="#" class="author"><span
class="name"><?php echo "$author" ;?></span><img
src="images/<?php echo "$image"; ?>" alt="" /></a>
</div>
</header>
<a href="single.html" class="image featured"><img
src="images/pic02.jpg" alt="" /></a>
<p><?php echo "$content"; ?></p>
<footer>
<ul class="actions">
<li><a href="single.html" class="button
large">Continue Reading</a></li>
</ul>
<ul class="stats">
<li><a href="#">General</a></li>
<li><a href="#" class="icon fa-
heart">28</a></li>
<li><a href="#" class="icon fa-
comment">128</a></li>
</ul>
</footer>
</article>
<!-- Post -->
<!-- Pagination -->
<ul class="actions pagination">
<li><a href="" class="disabled button large
previous">Previous Page</a></li>
<li><a href="#" class="button large next">Next
Page</a></li>
</ul>
</div>
<!--sidebar-->
<!-- Posts List -->
<section id="sidebar">
<!-- Intro -->
<section id="intro">
<a href="#" class="logo"><img
src="images/logo.jpg" alt="" /></a>
<header>
<h2>Future Imperfect</h2>
<p>Another fine responsive site template by
<a href="http://html5up.net">HTML5 UP</a></p>
</header>
</section>
<!-- Mini Posts -->
<section>
<div class="mini-posts">
<!-- Mini Post -->
<article class="mini-post">
<header>
<h3><a href="single.html">Vitae
sed condimentum</a></h3>
<time class="published"
datetime="2015-10-20">October 20, 2015</time>
<a href="#" class="author"><img
src="images/avatar.jpg" alt="" /></a>
</header>
<a href="single.html" class="image">
<img src="images/pic04.jpg" alt="" /></a>
</article>
<!-- Mini Post -->
<article class="mini-post">
<header>
<h3><a href="single.html">Rutrum
neque accumsan</a></h3>
<time class="published"
datetime="2015-10-19">October 19, 2015</time>
<a href="#" class="author"><img
src="images/avatar.jpg" alt="" /></a>
</header>
<a href="single.html" class="image">
<img src="images/pic05.jpg" alt="" /></a>
</article>
<!-- Mini Post -->
<article class="mini-post">
<header>
<h3><a href="single.html">Odio
congue mattis</a></h3>
<time class="published"
datetime="2015-10-18">October 18, 2015</time>
<a href="#" class="author"><img
src="images/avatar.jpg" alt="" /></a>
</header>
<a href="single.html" class="image">
<img src="images/pic06.jpg" alt="" /></a>
</article>
<!-- Mini Post -->
<article class="mini-post">
<header>
<h3><a href="single.html">Enim
nisl veroeros</a></h3>
<time class="published"
datetime="2015-10-17">October 17, 2015</time>
<a href="#" class="author"><img
src="images/avatar.jpg" alt="" /></a>
</header>
<a href="single.html" class="image">
<img src="images/pic07.jpg" alt="" /></a>
</article>
</div>
</section>
<section>
<ul class="posts">
<li>
<article>
<header>
<h3><a href="single.html">Lorem
ipsum fermentum ut nisl vitae</a></h3>
<time class="published"
datetime="2015-10-20">October 20, 2015</time>
</header>
<a href="single.html" class="image">
<img src="images/pic08.jpg" alt="" /></a>
</article>
</li>
<li>
<article>
<header>
<h3><a
href="single.html">Convallis maximus nisl mattis nunc id
lorem</a></h3>
<time class="published"
datetime="2015-10-15">October 15, 2015</time>
</header>
<a href="single.html" class="image">
<img src="images/pic09.jpg" alt="" /></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="single.html">Euismod
amet placerat vivamus porttitor</a></h3>
<time class="published"
datetime="2015-10-10">October 10, 2015</time>
</header>
<a href="single.html" class="image">
<img src="images/pic10.jpg" alt="" /></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="single.html">Magna
enim accumsan tortor cursus ultricies</a></h3>
<time class="published"
datetime="2015-10-08">October 8, 2015</time>
</header>
<a href="single.html" class="image">
<img src="images/pic11.jpg" alt="" /></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="single.html">Congue
ullam corper lorem ipsum dolor</a></h3>
<time class="published"
datetime="2015-10-06">October 7, 2015</time>
</header>
<a href="single.html" class="image">
<img src="images/pic12.jpg" alt="" /></a>
</article>
</li>
</ul>
</section>
<!-- About -->
<section class="blurb">
<h2>About</h2>
<p>Mauris neque quam, fermentum ut nisl vitae,
convallis maximus nisl. Sed mattis nunc id lorem euismod amet
placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at
phasellus sed ultricies.</p>
<ul class="actions">
<li><a href="#" class="button">Learn More</a>
</li>
</ul>
</section>
<!-- Footer -->
<section id="footer">
<ul class="icons">
<li><a href="#" class="fa-twitter"><span
class="label">Twitter</span></a></li>
<li><a href="#" class="fa-facebook"><span
class="label">Facebook</span></a></li>
<li><a href="#" class="fa-instagram"><span
class="label">Instagram</span></a></li>
<li><a href="#" class="fa-rss"><span
class="label">RSS</span></a></li>
<li><a href="#" class="fa-envelope"><span
class="label">Email</span></a></li>
</ul>
<p class="copyright">© Untitled. Design: <a
href="http://html5up.net">HTML5 UP</a>. Images: <a
href="http://unsplash.com">Unsplash</a>.</p>
</section>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2018-06-26 05:16:16
问题是您使用的是float。因为您将它应用于#sidebar中的每个元素，所以所有内容都会向右浮动，这会导致一些奇怪的事情发生。
相反，可以删除所有float属性，并尝试执行以下操作：
#sidebar {
margin-right: 3em;
min-width: 22em;
width: 22em;
text-align: center;
}
#sidebar>* {
border-top: solid 1px rgba(160, 160, 160, 0.3);
margin: 3em 0 0 0;
padding: 3em 0 0 0;
padding-left: 800px;
}我从两个声明中删除了float: right，因为您不需要它；我将text-align: center添加到#sidebar中，因为它会使您的文本居中；我添加了padding-left: 600px，它会将所有内容移到页面的右侧。我使用您的HTML在我的浏览器中测试了它，它工作得很好。
然而，我不知道你到底想要它是什么样子，所以显然需要调整一下。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51028860
复制相关文章
相似问题