html表单在导航栏中提交

需要关于html的建议，因为我不是这方面的专家。
我需要在网页顶部的导航栏上显示以下表单按钮，但它们出现在不同的行上。我希望这能够响应，因此对于较小的屏幕，它们可以在不同的线条上进行调整，但是如果有足够的区域，应该在导航栏上单行显示。尝试了几个CSS，但无法做到正确。建议....html表单在导航栏中提交

<body class="body">  
    <header> 
      <nav> 
       <ul> 
        <li><form action="/create" ><button type="submit">Create</button></form></li> 
        <li><form action="/update" ><button type="submit">Update</button></form></li> 
        <li><form action="/delete" ><button type="submit">Delete</button></form></li> 

       </ul> 
      </nav> 
    </header> 
    <div> 
    </div> 
</body>

来源

2016-02-01 chappalprasad

您可以使用：

li, form { display: inline; }

来源

2016-02-01 04:30:26

您添加CSS这样

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<body class="body">  
 
    <header> 
 
      <nav> 
 
       <ul> 
 
        <li><form action="/create" ><button type="submit">Create</button></form></li> 
 
        <li><form action="/update" ><button type="submit">Update</button></form></li> 
 
        <li><form action="/delete" ><button type="submit">Delete</button></form></li> 
 

 
       </ul> 
 
      </nav> 
 
    </header> 
 
    <div> 
 
    </div> 
 
</body>

来源

2016-02-01 04:34:31

html表单在导航栏中提交

回答

相关问题