gpt4 book ai didi

html - 如何将文本定位在导航栏旁边

转载 作者:行者123 更新时间:2023-11-28 17:11:06 26 4
gpt4 key购买 nike

我正在创建一个网页。现在我的导航栏和标题看起来不错,但我对正文感到困惑。我想知道如何让我的段落 float 到导航栏的右侧。现在他们卡在它下面了。我将使用什么 CSS 代码使其向右浮动?

这是到目前为止的样子http://i.imgur.com/SsJGW7w.png ...下面是 http://i.imgur.com/mq3TVrZ.png我想要在导航栏旁边

       <!DOCTYPE html>
<html>
<head>
<!-- Author: Abdullahi Jama 0003 -->
<title>Cycling Tours</title>
<link rel="stylesheet" type="text/css" media="print" href="printstyles.css" >
<link rel="stylesheet" type="text/css" href="aboutus.css" >
</head>

<body>

<header>
<a href="about_us.html"><img src="images/bicycle_axle_sm.jpg" alt="This is a picture of a axle"></a>
<h1>Cycling Tours</h1>
</header>

<div class="navmenu">
<nav>
<ul>
<li><a href="aboutus.html">AboutUs</a></li>
<hr>
<li><a href="#">AskUs</a></li>
<hr>
<li><a href="#">Destinations</a></li>
<hr>
<li><a href="#">FAQ</a></li>
<hr>
<li><a href="#">Reviews</a></li>
<hr>
<li><a href="#">Seminars</a></li>
<hr>
<li><a href="#">Trip Prep</a></li>
<hr>


</ul>
</nav>
</div>
<div class="paragraph">
<h2>About Us</h2>

<p>Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend.
Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and family members asked to join them in their trips.</p>
<div id="dust_jpeg">
<img id="dustimage" src="images/dust.jpg" alt="Picutre of Dust">
</div>
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils,
and hybrid vehicles to escort the cyclists.</p>

<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations.
You can also pay the single-supplement if you wish to have a room of your own.</p>

<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us.
We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>

</div>

<p id="bicycleimage"><img src="images/bicycles_sm.jpg" alt="An image of some bikes."><p>

<hr>

<p id="bottom_footer"><strong>Cycling Tours * P.O. Box 4455 * Brantford, ON * NET 2J0</strong><p>
</body>
</html>




<style type ="text/css">

header h1 {
display: inline;
font-size: 45px;
font-family: arial;
vertical-align: 90%;
margin: 30px;
}

header {
background-color: #bbccdd;
padding-bottom: 0px;
height: 121px;
}

.navmenu{
background-color: #bbccdd;
width: 8.8%;
height: 580px;
display:inline-block;
}
.navmenu hr {
border: 1px solid grey;
}
.navmenu ul {
margin-top: 0;
padding-left: 2px;
display:inline-block;
}
.navmenu li {
height: 35px;
padding-top: 30px;
padding-left: 10px;
font-family: arial;
color: grey;
display:inline-block;

}
.navmenu li a {
color: #888888;
text-decoration: none;
font-weight: bold;

}
.navmenu a:link {
color: #888888;
}
.paragraph {
width: 60%;
margin-left: 10%;
border-top: 0;
}

</style>

最佳答案

将侧边栏向左浮动

.navmenu {
float: left;
}

关于html - 如何将文本定位在导航栏旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29201863/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com