动态表格边框，css

Question

我有一个表单，可能有3个或5个带输入类型的标签（取决于其他地方的配置）。

这个表格周围有一个边框，高度和宽度都是固定的。当输入类型的数量为3时，表单应该稍微小一点，当输入类型为5时，应该稍微大一些，以容纳额外的字段。

我也希望文本在lhs上，并且对齐。

/* code to reset the browser - compliments to meyerweb */
* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 10px;
	font: inherit;
	vertical-align: baseline;
}

.loginform {
	padding-top: 20px;
	padding-left: 20px;
	width: auto;
	height:auto;
	border: 1px solid #999;
	border: inset 1px solid #333;
    border-size: auto;
	border-radius: 10px;
	margin: 10px 300px;
	margin-top: 45px;
	
	font-family: Tahoma;
	font-size: 12px;
}
.loginform ul {
    margin: 0;
}
.loginform li { 
   display:block;
   float:left;
   clear: left;
   width:auto; 
   height:15px; 
   padding: 10px;
}
.loginform li label{
    display: inline-block;
    width: 25%; /* giving the label a width, makes sure the input boxes align */
}

<section class="loginform">
    <form method="POST" autocomplete="off">
        <ul>  
            <li>
                <input type="text" >One</input>
            </li>
            <li>
                <input type="text" >Two</input>
            </li>
                <li>
                <input type="text" >Three</input>
            </li>

        </ul>
    </form>
</section>

Answer 1

边框不控制元素的大小，所以也许你对边框的作用的理解是错误的，或者你正在使用作品＆＃34; border＆＃34;或许你的意思是＆＃34;容器＆＃34;。

边框是一种装饰，位于元素的外边缘。它没有定义元素的大小。

在这种情况下，我认为您正在寻找的房产是display:inline-block：

.loginform {
    padding:20px;
    display: inline-block;
    vertical-align: top;
    background: lightblue;
    border: 1px solid #999;
    border-radius: 10px;
    margin: 10px auto;
    font-family: Tahoma;
    font-size: 12px;
}

＆＃13;

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.loginform {
  padding: 20px;
  display: inline-block;
  vertical-align: top;
  background: lightblue;
  border: 1px solid #999;
  border-radius: 10px;
  margin: 10px auto;
  font-family: Tahoma;
  font-size: 12px;
}
ul {
  list-style-type: none;
}

＆＃13;

<section class="loginform">
  <form method="POST" autocomplete="off">
    <ul>
      <li>
        <input type="text">One</input>
      </li>
      <li>
        <input type="text">Two</input>
      </li>
      <li>
        <input type="text">Three</input>
      </li>

    </ul>
  </form>
</section>

<section class="loginform">
  <form method="POST" autocomplete="off">
    <ul>
      <li>
        <input type="text">One</input>
      </li>
      <li>
        <input type="text">Two</input>
      </li>
      <li>
        <input type="text">Three</input>
      </li>
      <li>
        <input type="text">Four</input>
      </li>
      <li>
        <input type="text">Five</input>
      </li>
    </ul>
  </form>
</section>

＆＃13;

＆＃13;

＆＃13;