CSS宽度:不在标签

时间:2017-03-09 05:38:32

标签: css css3

我写了一个简单的表单来测试CSS中的宽度。无论我为宽度设置的值如何,边框仍然具有相同的宽度。有人可以帮助我找不到的东西吗?

<html  lang="en-US">
  <meta charset="UTF-8">
    <head>
      <style type="text/css">
        label {  
          width: 10em;  
          border-color: brown;  
          border-width: .25em;  
          border-style: double;  
          margin-right: .5em;      
        }
      </style>  
      <title>Trying CSS </title>  
    </head>  

    <body>
      <form  action="#">  
        <fieldset  >  
          <label> Name </label>  
          <input type="text"/>  
          <label  >Contact</label>  
          <input type="text" />  
          <label >Phone</label>  
          <input  type="text" />  
          <button type="button">Submit </button>  
        </fieldset>  
      </form>
    </body>
 </html>

6 个答案:

答案 0 :(得分:1)

使用此css

label {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
float:left;
}
input{float:left;}

<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->
<html  lang="en-US">
<head>
<meta charset="UTF-8">
<head>
<style type="text/css">
label {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
float:left;
}
input{float:left;}
</style>  
<title>Trying CSS </title>  
</head>  
<body>
<form  action="#">  
<fieldset  >  
<label> Name </label>  
<input type="text"/>  
<label  >Contact</label>  
<input type="text" />  
<label >Phone</label>  
<input  type="text" />  
<button type="button">Submit </button>  
</fieldset>  
</form>
</body>
</html>

答案 1 :(得分:0)

基本上标签是标签。所以你应该尝试将一个类放在label标签内,然后为此编写css。并为宽度尝试 - 宽度= 100%

答案 2 :(得分:0)

使用填充而不是宽度

label {  
padding: 0 55px;  
border-color: brown;  
border-width: .5em;  
border-style: double;  
margin-right: .5em;      
}

答案 3 :(得分:0)

<div class="labelborder">
     <label>sample text</label>
</div>
.labelborder {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
}

如果仅根据字体大小访问标签宽度,如果要在不增加字体大小的情况下增加,请使用上面的代码,

答案 4 :(得分:0)

根据您的要求添加一个样式标签

json_encode(array('like_count'=>$like_count))

public function select_likes()
{
 $Post_id=$this->input->post('Post_id');
  $User_id=$this->input->post('User_id');

  $this->load->model('Pmodel');
  $select_likes=$this->Pmodel->select_likes_post_id($Post_id,$User_id);
  $like_count = count($select_likes);
  echo json_encode(array('like_count'=>$like_count));
}

答案 5 :(得分:0)

只需将display:inline-block添加到标签即可获得宽度