Question

divs不会横向排列。我使用display：inline-block但它仍然无法工作。 div仍然垂直对齐。我还不确定为什么。我正在创建一个动态的Web项目。我使用Eclipse作为我的IDE，并且我正在编辑通过Java Servlet中的PrintWriter生成的HTML。我在这里尝试内联阻止的是＆＃34;教育背景＆＃34;

下面的信息

CSS：

@CHARSET＆＃34; ISO-8859-1＆＃34 ;;

body
{
    background-image: url("images/wood.jpg");
    font-family: Garamond;
    font-size: 20px;
}

.paper
{
    border: 1px solid black;
    width: 900px;
    height: 100%;
    margin-top: 40px;
    display: inline-block;
    padding: 10px;
    background-color: white;
    box-shadow: 5px 5px 20px 5px black;
}

.level1, .level2, .level3
{
    display: inline-block
}

/*.upper
{
    border-bottom: 1px solid black;
}*/

来自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>");

Answer 1

因为您已将HTML标记与空格分开，所以您的DIV可能已经结束。

添加

white-space: nowrap;

到您的CSS。

Answer 2

根据我的理解，您希望div级别1，级别2和级别3应该水平对齐。所以要实现这一点，从每个div的开头删除“br”标签，然后应用“display：inline-block;”在每个div。

Answer 3

如果你想让div水平排列。

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

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

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

显示赢得了内联块

3 个答案: