试试这个

Question

我正在尝试制作一个由标题（标签“手动控制”）和可点击的红色表格或按钮（“后退”）组成的标题，这些标题是内联的（宽度比例：75％到25％）。页面的总宽度不应超过420px。

这应该看起来像：

我尝试使用周围的<div class='heading'>标记和以下CSS代码：

.heading {
  width: 100%;
}
.heading div, form {
  float: left;
  clear: none;
}

但最终看起来像这样：

底部的滑块也太窄。它们应该从左向右扩展，并且一个在另一个之下排列（如第一张图中所示）。

这是我的JSFiddle：https://jsfiddle.net/salocinx/rub5jLhn/

要求：

整页宽度最大420px
标题内联（“手动控制”和“返回”）
剩余页面为“阻止”
滑块全长页面

HTML：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'/>
        <title>Menu Test</title>
        <link href='style.css' rel='stylesheet' type='text/css'>
        <script src='websocket.js' type='text/javascript'></script>
    </head>
    <body>
        <div class='frame'>
            <div class='heading'>
              <div class='title'>
                  Manual Control
              </div>
              <form method='post' action='/' class='back'>
                  Back
              </form>
            </div>
            <div>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            <div class='title'>
                Gadget
            </div>
            <div>
                <input class='enabled_red' id='r0' type='range' min='0' max='1023' step='1' oninput='sendRGB(0);' value='0'>
                <input class='enabled_green' id='g0' type='range' min='0' max='1023' step='1' oninput='sendRGB(0);' value='0'>
                <input class='enabled_blue' id='b0' type='range' min='0' max='1023' step='1' oninput='sendRGB(0);' value='0'>
            </div>
        </div>
    </body>
</html>

CSS：

body {
  text-align: center;
  font-family: verdana;
}
p {
  font-size: 1em;
  text-align: center;
}
div {
  font-size:1em;
  border-radius: 0.2rem;
  box-sizing: border-box;
}
div.frame {
  max-width: 420px;
  margin: auto;
  color: #444;
  text-align: left;
  border-style: solid;
  border-width: 1px;
  border-color: #d1d1d1;
  display: block;
}
.heading {
  width: 100%;
}
.heading div, form {
  float: left;
  clear: none;
}
div.title {
  border: 0;
  font-size:1.25em;
  font-weight: bold;
  text-align: center;
  color: white;
  background-color: #4C6DAF;
  padding: 18px;
}
form.back {
  border: 0;
  border-radius: 0.2rem;
  font-size:1.25em;
  font-weight: bold;
  text-align: center;
  color: white;
  background-color: #CB4C4C;
  cursor: pointer;
  padding: 18px;
}
div.logo {
  border: 0;
  text-align: center;
  padding: 24px;
}
/*input {
  width:100%;
  font-size:1em;
  border-style: solid;
  border-width: 1px;
  border-radius: 0.2rem;
  border-color: #d1d1d1;
  margin: 12px 0px;
  padding: 12px 0px 12px 12px;
  box-sizing: border-box;
  display: block;
} */
button {
  width: 100%;
  border: 0;
  color: white;
  border-radius: 0.2rem;
  line-height: 2.4rem;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 12px 0px;
}
button:hover {
  opacity: 0.75;
}
form.back:hover {
  opacity: 0.75;
}

/* ___________________________________ COLOURS __________________________________ */

.red {
  background-color: #CB4C4C;
}
.green {
  background-color: #4DB248;
}
.blue {
  background-color: #5591E3;
}

/* ____________________________________ SLIDER ___________________________________ */

input[type=range] {
  -webkit-appearance: none;
  border: 0px;
  outline: none;
  padding: 16px 16px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0px;
  height: 36px;
  width: 36px;
  margin-top: -16px;
  border-radius: 5px;
  cursor: pointer;
}
input.enabled_red[type=range]::-webkit-slider-thumb {
  background: #CB4C4C;
  cursor: pointer;
}
input.enabled_green[type=range]::-webkit-slider-thumb {
  background: #4DB248;
  cursor: pointer;
}
input.enabled_blue[type=range]::-webkit-slider-thumb {
  background: #5591E3;
  cursor: pointer;
}
input.disabled[type=range]::-webkit-slider-thumb {
  background: #999999;
}
input[type=range]::-webkit-slider-runnable-track {
  width: inherit;
  height: 4px;
  border-radius: 1px;
  background: #CCCCCC;
}
input.enabled[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
}

尝试了很多不同的方法，但我真的不走运。有人能指出我正确的方向吗？

Answer 1

你正在使用一些不必要的浮动。您可以使用flex作为标题：

import psycopg2
import sys

connection = None

connection = psycopg2.connect("host='localhost' db='football'           
user ='postgres' password='password'")   
cur = con.cursor()
con.commit()

try:
    with connection.cursor() as cursor:
    # Create a new record
    sql = "INSERT INTO `Games` (`email`, `password`) VALUES (%s, %s)"
    cursor.execute(sql, ('webmaster@python.org', 'very-secret'))
except SyntaxError as e:
    print("There was an error: {}".format(e))


connection.commit()

with connection.cursor() as cursor:
# Read a single record
    sql = "SELECT row[5]"
    cursor.execute(sql, ('row [5]',))
    result = cursor.fetchone()
    print(result)
finally:
    connection.close()

还将输入范围包装在容器内并使用flex，如下所示：

.heading {
  width: 100%;
  display: flex;
}

.heading>div {
  flex: 4;
}
.heading>form {
  flex: 1;
}

完整代码：

.container-input {
    display:flex;
    flex-direction:column;
}

body {
  text-align: center;
  font-family: verdana;
}

p {
  font-size: 1em;
  text-align: center;
}

div {
  font-size: 1em;
  border-radius: 0.2rem;
  box-sizing: border-box;
}

div.frame {
  max-width: 420px;
  margin: auto;
  color: #444;
  text-align: left;
  border-style: solid;
  border-width: 1px;
  border-color: #d1d1d1;
  display: inline-block;
}

.heading {
  width: 100%;
  display: flex;
}

.heading>div {
  flex: 4;
}
.heading>form {
  flex: 1;
}

div.title {
  border: 0;
  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
  color: white;
  background-color: #4C6DAF;
  padding: 18px;
}

form.back {
  border: 0;
  border-radius: 0.2rem;
  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
  color: white;
  background-color: #CB4C4C;
  cursor: pointer;
  padding: 18px;
}

div.logo {
  border: 0;
  text-align: center;
  padding: 24px;
}

.container-input {
  display: flex;
  flex-direction: column;
  padding:10px 0;
}

button {
  width: 100%;
  border: 0;
  color: white;
  border-radius: 0.2rem;
  line-height: 2.4rem;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 12px 0px;
}

button:hover {
  opacity: 0.75;
}

form.back:hover {
  opacity: 0.75;
}


/* ___________________________________ COLOURS __________________________________ */

.red {
  background-color: #CB4C4C;
}

.green {
  background-color: #4DB248;
}

.blue {
  background-color: #5591E3;
}


/* ____________________________________ SLIDER ___________________________________ */

input[type=range] {
  -webkit-appearance: none;
  border: 0px;
  outline: none;
  padding: 16px 16px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0px;
  height: 36px;
  width: 36px;
  margin-top: -16px;
  border-radius: 5px;
  cursor: pointer;
}

input.enabled_red[type=range]::-webkit-slider-thumb {
  background: #CB4C4C;
  cursor: pointer;
}

input.enabled_green[type=range]::-webkit-slider-thumb {
  background: #4DB248;
  cursor: pointer;
}

input.enabled_blue[type=range]::-webkit-slider-thumb {
  background: #5591E3;
  cursor: pointer;
}

input.disabled[type=range]::-webkit-slider-thumb {
  background: #999999;
}

input[type=range]::-webkit-slider-runnable-track {
  width: inherit;
  height: 4px;
  border-radius: 1px;
  background: #CCCCCC;
}

input.enabled[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
}

Answer 2

您好请在下面添加CSS

.header-back{
  width:25%;
}
form.back{
  width:100%; 
  padding-left:0px !important;
  padding-right:0px !important;
}
.heading .title{
  width:75%;
}

然后将标题div html更改为

    <div class='heading'>
          <div class='title'> 
              Manual Control
          </div>
          <div class="header-back">
          <form method='post' action='/' class='back'>
              Back
          </form>              
          </div>
        </div>

那么它看起来像

Answer 3

试试这个

    .heading div,
     .heading form{
     float:left;
     }

    .heading div{
      width:75%;
    }

    .heading form{
     width:25%;
    }

如何使用可点击的内联形式制作标题标题？

3 个答案:

试试这个