Question

我正在学习用于构建网络应用的CSS，我将public function gol() { $query = $this->db->select('GOLONGAN')->order_by('GOLONGAN','DESC') ->get('golongan'); if ($query->num_rows() > 0){ return $query->result(); } else { return false; } }从100％更改为60％，布局已更改

代码来自https://www.w3schools.com/css/tryit.asp?filename=trycss_forms

，代码是

＆＃13;

width

＆＃13;

原始输出是移动风格，而不是PC风格

如何将<!DOCTYPE html> <html> <style> input[type=text], select { width: 60%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 60%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } </style> <body> <h3>Using CSS to style an HTML Form</h3> <div> <form action="/action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="country">Country</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> <input type="submit" value="Submit"> </form> </div> </body> </html>更改为60％并保留原始布局？

Answer 1

您必须将表单放在另一个容器中（参见＆＃34; div.smaller＆＃34;）：

＆＃13;

    <!DOCTYPE html>
    <html>
    <style>
    input[type=text], select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    
    }
    
    input[type=submit] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    
    input[type=submit]:hover {
        background-color: #45a049;
    }
    
    div {
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
    }
    
    
    .smaller
    {
    	width:60%;
    }
    </style>
    <body>
    
    <h3>Using CSS to style an HTML Form</h3>
    
    <div>
      <form action="/action_page.php">
      <div class="smaller">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
    
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    
        <label for="country">Country</label>
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
    
        <input type="submit" value="Submit">
        </div>
      </form>
    </div>
    
    </body>
    </html>

＆＃13;

Answer 2

您只需将第一个width的{{1}}更改为div即可。我添加了一个新ID，以防止将所有60% div设置为width。

60%

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

#newId {
    width: 60%;
}

Answer 3

您要更改的宽度位于标记内。如果您在此处更改宽度，它将更改对象的整体宽度，并保留所包含的布局。

SELECT @rownum := @rownum + 1 row, m.* FROM Machine m, (SELECT @rownum := 0) r

Answer 4

更改其中包含表单的div的宽度。并使输入宽度为100％。所以它会自动设置为60％。这里你的代码不起作用，因为默认情况下你的div宽度是100％，你试图将输入框的宽度减少到60％。所以它相对于你的div而不是屏幕减少到60％，所以div的所有其他元素都以这种方式重新排列，以填补空白。

试试这段代码

       <!DOCTYPE html>
 <html>
 <style>
 .anotherClass{
 width:60%;
 }
input[type=text], select {
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 display: inline-block;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;

  }

 input[type=submit] {
 width: 100%;
 background-color: #4CAF50;
 color: white;
 padding: 14px 20px;
 margin: 8px 0;
 border: none;
 border-radius: 4px;
 cursor: pointer;
  }

  input[type=submit]:hover {
  background-color: #45a049;
   }

  div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
   }
 </style>
<body>

  <h3>Using CSS to style an HTML Form</h3>

  <div class="anotherClass">
  <form action="/action_page.php">
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="firstname" placeholder="Your name..">

 <label for="lname">Last Name</label>
 <input type="text" id="lname" name="lastname" placeholder="Your lastname..">

<label for="country">Country</label>
<select id="country" name="country">
  <option value="australia">Australia</option>
  <option value="canada">Canada</option>
  <option value="usa">USA</option>
 </select>

 <input type="submit" value="Submit">
  </form>
 </div>

 </body>
 </html>

Answer 5

Dude只是将br元素放在每个元素之后：这是另一个非常简单的解决方案

试试这段代码：

sudo

}

 <!DOCTYPE html>
 <html>
 <style>

 input[type=text],select {
width: 60%;
  padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;

css，更改宽度后，布局发生了变化

5 个答案: