切换到django现在标签标签宽度拉伸到标签内容宽度...很难解释
这很难解释，但标签的长度根据页面内容宽度拉伸。它发生在我们用django框架实现一个已经制作的GUI之后这是一张照片：
这张照片代表了我们开始使用django之前的期望和方式。您可以看到标签长度与标题的长度相匹配，这就是我想要的：
这是html：
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
<header>
<img src="{% static 'images/arda.png' %}" alt="logo">
<h1>Autism Resource Database Alaska<h1>
</header>
<!--<ul class="header_links">
<li> <a href="{% url 'home' %}">Home</a> </li>
<li> <a href="{% url 'about' %}">About</a> </li>
<li> <a href="{% url 'contact' %}">Contact</a> </li>
<li> <a href="{% url 'faq' %}">FAQ</a></li>
</ul>-->
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<labels for="tab1">Resource Browser</labels>
<div id="tab-content1" class="tab-content animated fadeIn">
<div id="searchbar">
<form action="/search/" method="get">
<input type="text" name="q" placeholder="Enter Query..." class="search">
<input type="submit" value="Search Database" class="button">
</form>
</div>
<div id="sidebar">
<form action="/result/" method="get">
<p> Demographics </p>
<input type="checkbox" name="male" value="selected" id="g_male" />
<label for="g_male">male</label><br>
<input type="checkbox" name="female" value="selected" id="g_female" />
<label for="g_female">female</label><br>
<input type="checkbox" name="age1-3" value="selected" id="age1-3" />
<label for="age1-3">Age 1-3</label><br>
<input type="checkbox" name="age3-18" value="selected" id="age3-18" />
<label for="age3-18">Age 3-18</label><br>
<input type="checkbox" name="age18+" value="selected" id="age18+" />
<label for="age18+">Age 18+</label><br>
<p> Disorders </p>
<input type="checkbox" name="Autism Spectrum Disorder" value="selected" id="asd" />
<label for="Austism Spectrum Disorder">Autism Spectrum</label> <br>
<input type="checkbox" name="Fetal Alcohol Syndrome" value="selected" id="fas" />
<label for="fas">Fetal Alcohol</label><br>
<input type="checkbox" name="Pervasive Developement Disorder" value="selected" id="pdd" />
<label for="pdd">Pervasive Development</label><br>
<input type="checkbox" name="Aspergers Syndrome" value="selected" id="aspergers" />
<label for="aspergers">Aspergers Syndrome</label><br>
<input type="checkbox" name="Cognative Development Disorder" value="selected" id="cdd" />
<label for="cdd">Cognative Development</label><br>
<p> Behaviors </p>
<input type="checkbox" name="sleep" value="selected" id="sleep" />
<label for="sleep">Sleep</label><br>
<input type="checkbox" name="safety home" value="selected" id="safety_home" />
<label for="safety_home">Safety Home</label><br>
<input type="checkbox" name="safety public" value="selected" id="safety_public" />
<label for="safety_public">Safety Public</label><br>
<input type="checkbox" name="safety travel" value="selected" id="safety_travel" />
<label for="safety_travel">Safety Travel</label><br>
<input type="checkbox" name="repetition" value="selected" id="repetition" />
<label for="repetition">Repitition </label><br>
<input type="checkbox" name="aggression" value="selected" id="aggression" />
<label for="aggression">Aggression</label><br>
<input type="checkbox" name="communication" value="selected" id="communication" />
<label for="communication">Communication</label><br>
<input type="checkbox" name="nonverbal" value="selected" id="nonverbal" />
<label for="nonverbal">Nonverbal</label><br>
<input type="checkbox" name="sensory" value="selected" id="sensory" />
<label for="sensory">Sensory</label><br>
<input type="checkbox" name="meltdown" value="selected" id="meltdown" />
<label for="meltdown">Meltdown</label><br>
<input type="checkbox" name="anxiety" value="selected" id="anxiety" />
<label for="anxiety">Anxiety</label><br>
<input type="checkbox" name="change" value="selected" id="change" />
<label for="change">Change</label><br><br>
<input type="submit" value="Submit" />
</form>
</div> <!-- closing sidebar tag -->
{% if error %}
{% endif %}
</div> <!-- closing searchbar tag-->
<div id="wrapper">
<main>
{% block content %}
{% endblock %}
</main>
</div> <!-- closing wrapper tag -->
<footer>
<a href="{% url 'admin:index' %}">admin login</a>
</footer>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<labels for="tab3">Help</labels>
<div id="tab-content3" class="tab-content animated fadeIn">
<form style="width: 100%">
</div>
</li>
</ul>
</body>
</html>
这是css：
body {
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 0px;
border-style: solid;
border-top-width: 12px;
border-top-color: #207cca;
font-family: Arial, Verdana, sans-serif;
color: #111111;
}
/* Beginning of header contents */
header {
height: 80px;
font-family: Impact;
color: white;
font-size: 46px;
background-color: #207cca;
box-shadow: 0px 8px 10px #888888;
margin-top: 0px;
margin-bottom: -20px;
}
header h1 {
margin: 0;
padding-top: 7px;
font-size: 45px;
font-family: Impact, Arial, sans-serif;
color: white;
overflow: hidden;
white-space: nowrap;
}
header img {
height: 70px;
width: 100px;
float: left;
padding: 10px 10px 0px 5px;
}
/* End of header contents */
#searchbar {
padding-top: 13px;
padding-left: 8px;
padding-bottom: 13px;
}
#wrapper {
width: 1000px;
background-color: #EEE;
border: solid 2px #ADADAD;
margin-top: 15px;
}
/* Beginning of sidebar content styling */
#sidebar {
width: 240px;
float: left;
padding-left: 8px;
padding-right: 8px;
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
}
/* End of sidebar */
/* Beginning of main content*/
main {
width: ;
margin-left: 250px;
padding: 5px;
background-color: #FFFFFF;
min-height: 800px;
}
main p {
font-size:12px;
font-family: Helvetica, sans-serif;
color: #555555;
}
main h2 {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
main h3 {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
.overview_heading {
font-weight:bold;
}
main img {
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
}
footer {
text-align: center;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
float: none;
list-style: none;
position: relative;
padding: 0;
margin-top: 18px;
margin-left: 115px;
}
.tabs li{
float: left;
}
.tabs labels {
box-shadow: 0px 4px 10px #888888;
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #207cca;
font-size: 20px;
font-weight: normal;
font-family: Impact, Verdana, sans-serif;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tabs labels:hover {
background: lightgrey;
top: 0;
}
[id^=tab]:checked + labels {
background: #207cca;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
line-height: 140%;
padding-top: 0px;
background: white;
color: black;
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
.search {
width: 158px;
margin-left: -8px;
margin-top: 50px;
box-shadow: 0px 4px 10px #888888;
padding: 10px 15px;
background: rgba(50, 50, 50, 0.2);
border: 0px solid #dbdbdb;}
.button {
box-shadow: 0px 4px 10px #888888;
padding: 8px, 15px;
left:-10px;
border: 6px solid #207cca;
background-color: #207cca;
color: #fafafa;}
.button:hover {
background-color:#fafafa;
border-color:#207cca;
color:#207cca;}
/* End of main content */
必须简单。请帮助，因为我已经尝试了几个小时。
2 个答案:
答案 0 :(得分：1)
我认为你错过了html中的li结束标记
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<labels for="tab1">Resource Browser</labels>
<div id="tab-content1" class="tab-content animated fadeIn">
</li>
答案 1 :(得分：0)
我在第一个标签元素的结束标记附近有一个额外的结束</div>标记。特别向palafox_e大喊大叫！谢谢你的家。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？