Html 显示赢得'；t内联块_Html_Css_Eclipse

Html 显示赢得'；t内联块

html css eclipse

Html 显示赢得'；t内联块,html,css,eclipse,Html,Css,Eclipse,潜水艇不会水平排列。我使用了display:inline块，但它仍然不起作用。div仍然垂直对齐。我还是不知道为什么。我正在创建一个动态web项目。我使用Eclipse作为IDE，并在Javaservlet中编辑通过PrintWriter生成的HTML。我试图在这里内联阻止的是“教育背景”下面的信息 CSS: @字符集“ISO-8859-1” 来自Servlet的HTML： pw.println("<!DOCTYPE html>" + "<html&g

潜水艇不会水平排列。我使用了display:inline块，但它仍然不起作用。div仍然垂直对齐。我还是不知道为什么。我正在创建一个动态web项目。我使用Eclipse作为IDE，并在Javaservlet中编辑通过PrintWriter生成的HTML。我试图在这里内联阻止的是“教育背景”下面的信息

CSS:

@字符集“ISO-8859-1”

来自Servlet的HTML：

 pw.println("<!DOCTYPE html>"
            + "<html> <head> <title> Curriculum Vitae </title> <link href=\"cv.css\" rel=\"stylesheet\">"
            + "<body><div class=\"main\" align=\"center\">"
            + "             <div class=\"paper\" align=\"left\">"  
            + "                 <div class=\"upper\">"
            + "                     <div class=\"basicInfo\">"
            + "                     <div class=\"name\"><h2>" + lastName + ", " + firstName +" "+ middleName + "</h2></div>"
            +                       homeAddress + "<br>" + provincialAddress + "<br>" + contactDetails + "<br>" + birthdate + "<br>" + maritalStatus + "<br><br></div>"
            + "                     <div class=\"image\">" + imageURL + "</div>"
            + "                 </div>"
            + "                 <div class=\"educationInfo\">" 
            + "                 <h3 align=\"left\"> Educational Background </h3>"
            + "                     <br><div class=\"level1\">" + tSchool + "<br>" + tCourse + "<br> Completed Years: " + tInclusiveYears + "<br> Awards: " + tHonorsReceived + "<br></div>"
            + "                     <br><div class=\"level2\">" + sSchool + "<br>Secondary<br> Completed Years: " + sInclusiveYears + "<br> Awards: " + sHonorsReceived + "<br></div>"
            + "                     <br><div class=\"level3\">" + pSchool + "<br>Primary<br> Completed Years: "  + pInclusiveYears + "<br> Awards: " + pHonorsReceived + "<br></div>"
            + "                 </div>"
            + "             </div>"
            + "     </div>"
            + "</body>"
            + "</html>");

pw.println（““
+“简历”
+ ""
+ "             "  
+ "                 "
+ "                     "
+“+lastName+”、“+firstName+”、“+middleName+”
+家庭地址+“
”+省籍地址+“
”+联系人详细信息+“
”+出生日期+“
”+婚姻状况+“

”
+“”+imageURL+“”
+ "                 "
+ "                 " 
+“教育背景”
+“
”+tSchool+”
“+tCourse+”
完成年份：“+tClusiveyears+”
奖项：“+ThorsReceived+”
”
+“
”+sSchool+“
中学
完成年份：“+sInclusiveYears+”
奖项：“+sHonorsReceived+”
”
+“
”+pSchool+“
小学
完成年份：“+pInclusiveYears+”
奖项：“+phonors获得+”
”
+ "                 "
+ "             "
+ "     "
+ ""
+ "");

如果希望div水平排列

您应该为所有div设置css样式，如以下示例所示：

<style>
    .inline{
       width: 100px;
       display: inline-block;
    }

</style>
<div class="inline">content 1</div>
<div class="inline">content 2</div>


.内联{
宽度：100px；
显示：内联块；
}
内容1
内容2

因为您用空格分隔了HTML标记，所以div可能会被压缩

加

根据我的理解，你希望一级、二级和三级的div水平对齐。因此，要实现这一点，请从每个div的开头删除“br”标记，然后在每个div中应用“display:inline block；”。

是否尝试缩小

div

的宽度。试着缩小这个我刚做了什么都没发生

<style>
    .inline{
       width: 100px;
       display: inline-block;
    }

</style>
<div class="inline">content 1</div>
<div class="inline">content 2</div>

white-space: nowrap;