Question

<ul  style="display:inline;width:20cm;">

<li style="display:inline;"><form action={4} >
<input style="color: black;     
    background-color: #3CB371;
    width: 100px;
    height:40px;
    text-align: center;
    padding: 4px;
    font-size:15px;
    text-decoration: none;
    behavior:url(border-radius.htc);
    border-radius:20px;
    font-weight:bold;
    " type="button" value="Approve"  ></form></li>


    <li style="display:inline;"><form action={5}>
    <input  style="margin-left:80px;
    color: black;
    background-color:   #ff0000;
     width: 100px;
    height:40px;
    text-align: center;
    font-size:15px;
    padding: 4px;
    text-decoration: none;
    behavior:url(border-radius.htc);
    border-radius:20px;
    font-weight:bold;
    " type="button" value="Reject"  id="buttonReject"></form></li>
    </ul><br><br><br>

使用这段代码我上下两个按钮形式，但我想要它们左右，我必须做出哪些改变？

Answer 1

只需将display:inline更改为display:inline-block;

即可

<li style="display:inline-block;">

<强> Working Fiddle

Answer 2

如果block中有inline-block或<li>元素，当前为inline且会导致inline无法正常工作。所以试试这个：

<li style="display: inline-block;">

工作代码段

<ul style="display:inline;width:20cm;">

  <li style="display:inline-block;">
    <form action={4}>
      <input style="color: black;     
    background-color: #3CB371;
    width: 100px;
    height:40px;
    text-align: center;
    padding: 4px;
    font-size:15px;
    text-decoration: none;
    behavior:url(border-radius.htc);
    border-radius:20px;
    font-weight:bold;
    " type="button" value="Approve">
    </form>
  </li>


  <li style="display:inline-block;">
    <form action={5}>
      <input style="margin-left:80px;
    color: black;
    background-color:   #ff0000;
     width: 100px;
    height:40px;
    text-align: center;
    font-size:15px;
    padding: 4px;
    text-decoration: none;
    behavior:url(border-radius.htc);
    border-radius:20px;
    font-weight:bold;
    " type="button" value="Reject" id="buttonReject">
    </form>
  </li>
</ul>

左右对齐html格式

2 个答案: