Как я могу сделать рамку с CSS вокруг некоторых элементов без указания абсолютной ширины? - PullRequest
Новая
       9

Как я могу сделать рамку с CSS вокруг некоторых элементов без указания абсолютной ширины?

0 голосов
/ 04 декабря 2009

Я новичок в CSS и хотел бы нарисовать границу вокруг этого: 

fieldset {
  background-color: #e1e1e1;
  border: 1px solid #808080;
}

legend {
  background-color: #e1e1e1;
  border: 1px solid #808080;
  border-left-width;
  50%;
  color: #0667ad;
  font-style: italic;
  font-weight: bold;
}

div.menu {
  border: 1px solid #808080;
  padding: 1px;
  width: 271px;
}

p {
  margin: 1px;
}

label {
  border: 1px solid #e1e1e1;
  background-color: #84b0d4;
  color: #ffffff;
  display: block;
  float: left;
  margin-right: 1px;
  padding: 1px;
  text-align: right;
  width: 8em;
}

input {
  background: #ffffff;
  border: 1px solid #e1e1e1;
}
<form name="SomeForm" method="post" action="SomeAction">
  <fieldset>
    <legend>Details</legend>
    <div class="menu">
      <p><label for="UserName">Username</label><input name="UserName" id="UserName" type="text" value="#data[1].username#"></p>
      <p><label for="Password">Password</label><input name="Password" id="Password" type="password" value="#data[1].password#"></p>
      <p><label for="FirstName">First name</label><input name="FirstName" id="FirstName" type="text" value="#data[1].firstname#"></p>
      <p><label for="LastName">Last name</label><input name="LastName" id="LastName" type="text" value="#data[1].lastname#"></p>
    </div>
  </fieldset>
</form>

Прямо сейчас я определил ширину div как 271px. Есть ли способ обернуть границу вокруг содержащихся в ней элементов без указания абсолютной ширины?

Ответы [ 2 ]

3 голосов
/ 04 декабря 2009 
div.menu {
  border: 1px solid #808080;
  padding: 1px;
  float: left;
}

и 

<div class="menu">
  <p><label for="UserName">Username</label><input name="UserName" id="UserName" type="text" value="#data[1].username#"></p>
  <p><label for="Password">Password</label><input name="Password" id="Password" type="password" value="#data[1].password#"></p>
  <p><label for="FirstName">First name</label><input name="FirstName" id="FirstName" type="text" value="#data[1].firstname#"></p>
  <p><label for="LastName">Last name</label><input name="LastName" id="LastName" type="text" value="#data[1].lastname#"></p>
</div>
<div style="clear: both;"></div>
1 голос
/ 04 декабря 2009

Удалите float: left из ваших ярлыков, добавьте float: left в ваше div.menu и удалите width: 271px из вашего div.menu.

Причина, по которой теперь происходит разрыв при удалении ширины из div.menu, заключается в том, что метки перемещаются влево и не очищают ввод над ними.

Edit: Другой вариант, если вы хотите оставить надписи плавающими влево, это добавить правило очистки к абзацам в меню: 

div.menu p { clear: both; }
...