Question

我正在学习HTML和CSS，并且正在为自己的家庭作业建立一个网站。我已经成功地在边框内创建了一个菜单。我希望在其旁边显示一些文本，但要在其顶部显示（因为我已将代码放在菜单顶部）。我只希望文本在菜单旁边（当然是在垂直线之后），并与菜单独立地处理段落。我该如何实现？这就是我的意思（不要介意字符，它们是希腊语）：

enter image description here

正如您所看到的，当我在写段落时，带有选项的菜单一直在向下移动，我不希望这样。

这是我的代码：

#first {
  border: 3px;
  border-style: solid;
  border-color: black;
  padding: 1em;
  text-align: center
}

#second {
  border: 3px;
  border-style: solid;
  border-color: black;
  padding: 1em;
  text-align: left
}

.target span {
  background-color: grey;
  color: white;
}

#line {
  border-left: 3px solid black;
  height: 500px;
  position: absolute;
  position: absolute;
  left: 15%;
  margin-left: -3px;
  top: 130px;
}

#transparent-line {
  border-left: 3px solid white;
  height: 250px;
}

#description {
  text-indent: 300px;
  font-size: 18px;
}

<div id="first">
  <h1>Αρχική σελίδα</h1>
</div>


<div id="second">
  <div id="description">

    <p> Καλωσήρθατε στον ιστόχωρο για το μάθημα "Εκμάθηση HTML". Η ιστοσελίδα αυτή δημιουργήθηκε με σκοπό να διευκολύνει τους φοιτητές κατά την εκμάθηση της HTML. </p>
    <p> Επιπλέον,

  </div>
  <h4 class="target"><span>Αρχική σελίδα</span></h4>
  <h4 class="target"><span>Ανακοινώσεις</span></h4>
  <h4 class="target"><span>Επικοινωνία</span></h4>
  <h4 class="target"><span>Έγγραφα μαθήματος</span></h4>
  <h4 class="target"><span>Εργασίες</span></h4>
  <div id="line"></div>
  <div id="transparent-line"></div>

Answer 1

在div中包装目标div，并使用display:flex更改html的顺序

        #first{
        	border:3px; 
        	border-style:solid; 
        	border-color: black; 
        	padding: 1em; 
        	text-align: center
        }

        #second{
        	border:3px; 
        	border-style:solid; 
        	border-color: black;  
        	display:flex;
         
        }
h4{
min-width: 150px;
}
        .target span{
        	background-color: grey;
        	color: white;
          min-width:150px;
        }

        #description{
        	font-size: 18px;
          border-left:1px solid black;
          padding:5px;
        }

<div id="first">
        	<h1>Αρχική σελίδα</h1>
</div>

<div id="second">
<div>
   <h4 class="target"><span>Αρχική σελίδα</span></h4>
   <h4 class="target"><span>Ανακοινώσεις</span></h4>
   <h4 class="target"><span>Επικοινωνία</span></h4>
   <h4 class="target"><span>Έγγραφα μαθήματος</span></h4>
   <h4 class="target"><span>Εργασίες</span></h4>
</div>
<div id="description">
   <p> Καλωσήρθατε στον ιστόχωρο για το μάθημα "Εκμάθηση HTML". Η ιστοσελίδα αυτή δημιουργήθηκε με σκοπό να διευκολύνει τους φοιτητές κατά την εκμάθηση της HTML. </p>
   <p> Επιπλέον,
</div>

</div>

Answer 2

1）交换“导航”和“内容”的HTML，然后将它们包装在div中。这将使您可以更精确地控制网页的两个元素。

2）将两个包装器div浮动到左侧，并对其施加宽度。这会将两个元素置于同一行，然后让您控制要导航和内容占据的页面数量。

#first{
    	border:3px; 
    	border-style:solid; 
    	border-color: black; 
    	padding: 1em; 
    	text-align: center
    }

    #second{
    	border:3px; 
    	border-style:solid; 
    	border-color: black; 
    	padding: 1em; 
    	text-align: left
    }

    .target span{
    	background-color: grey;
    	color: white;
    }

    #line{
    	border-left: 3px solid black;
     	height: 500px;
     	position: absolute;
    	position: absolute;
        left: 15%;
        margin-left: -3px;
        top: 130px;
    }

    #transparent-line{
    	border-left: 3px solid white;
     	height: 250px;
    }

    #description{
    	text-indent: 300px;
    	font-size: 18px;
    }

    .nav{
        float:left;
        width:20%;
    }

    .content{
        float:left;
        width:80%;
    }

 

   <div id="first">
    <h1>Αρχική σελίδα</h1>
</div>


<div id="second">
    <div class="nav">    
        <h4 class="target"><span>Αρχική σελίδα</span></h4>
        <h4 class="target"><span>Ανακοινώσεις</span></h4>
        <h4 class="target"><span>Επικοινωνία</span></h4>
        <h4 class="target"><span>Έγγραφα μαθήματος</span></h4>
        <h4 class="target"><span>Εργασίες</span></h4> 
    </div>

        <div class="content">
            <div id="description">
        
                <p> Καλωσήρθατε στον ιστόχωρο για το μάθημα "Εκμάθηση HTML". Η ιστοσελίδα αυτή δημιουργήθηκε με σκοπό να
                    διευκολύνει τους φοιτητές κατά την εκμάθηση της HTML. </p>
                <p> Επιπλέον,
        
            </div>
        </div>

    <div id="line"></div>
    <div id="transparent-line"></div>

Answer 3

#first{
    	border:3px; 
    	border-style:solid; 
    	border-color: black; 
    	padding: 1em; 
    	text-align: center
    }

    #second{
    	border:3px; 
    	border-style:solid; 
    	border-color: black;
    	text-align: left
      width:100%;
      float:left;
      padding:0 0 0 15px;
    }

    .target span{
    	background-color: grey;
    	color: white;
    }

   .menu-items{width:25%;float:left;border-right:3px solid #000;}
   .description{width:70%;float:right;padding:15px;}

<div id="first">
    	<h1>Αρχική σελίδα</h1>
    </div>


    <div id="second">
    	<div class="menu-items">
        <h4 class="target"><span>Αρχική σελίδα</span></h4>
        <h4 class="target"><span>Ανακοινώσεις</span></h4>
        <h4 class="target"><span>Επικοινωνία</span></h4>
        <h4 class="target"><span>Έγγραφα μαθήματος</span></h4>
        <h4 class="target"><span>Εργασίες</span></h4>
    	</div>
      <div id="description">

    		<p> Καλωσήρθατε στον ιστόχωρο για το μάθημα "Εκμάθηση HTML". Η ιστοσελίδα αυτή δημιουργήθηκε με σκοπό να διευκολύνει τους φοιτητές κατά την εκμάθηση της HTML. </p>
    		<p> Επιπλέον,

    	</div>
    </div>

菜单旁边的HTML文本显示

3 个答案: