Почему страница ASPX HTML отображается некорректно. Если я go в окне дизайна в VS, код CSS отображается правильно, но если я использую браузер (IIS Express Opera), кнопки отображаются в неправильном положении.
Я использовал Css чтобы кнопка перемещалась влево или вправо в Div-Box.
Дизайн в Visual Studio 2019 ![enter image description here](https://i.stack.imgur.com/CO3Wv.png)
как это выглядит в браузере: ![enter image description here](https://i.stack.imgur.com/BE0FY.png)
Код:
CSS
.div1 {
background-color: red;
width: 800px;
height: 100%;
}
#ListPersonen {
float: right;
}
.Fright {
float: right;
}
.Fleft {
float: left;
}
H3 {
font-size: 20px;
margin: 0;
border: 0;
padding: 0;
}
SiteMaster:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="NetTest.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - Mannschaftsverwaltung</title>
<link href="~/Css/MVStyle.css" rel="stylesheet" type="text/css" media="screen" runat="server"/>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="~/Css/MVStyle.css" rel="stylesheet" type="text/css" media="screen" runat="server"/>
</head>
ASPX (HTML)
<%@ Page Title="" Language="C#" MasterPageFile="~/View/Site.Master" AutoEventWireup="true" CodeBehind="Mannschaftsverwaltung.aspx.cs" Inherits="NetTest.View.Mannschaftsverwaltung" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h1>Mannschaftsverwaltung - Teams</h1>
<asp:Label ID="infoLabel" runat="server" Text="" Visible="false" ForeColor="Green" Font-Size="15"></asp:Label>
<br />
<h3> Mannschaften: </h3>
<asp:ListBox ID="listMannschaften" runat="server" Width="200px" Height="75px" OnSelectedIndexChanged="listMannschaften_SelectedIndexChanged" AutoPostBack="true"></asp:ListBox>
<br /> <br />
<div class="div1">
<div class="Fleft">
<h3> Personen (Mannschaft) </h3>
<asp:ListBox ID="ListPersonen" runat="server" Height="200px" Width="300px" AutoPostBack="true"></asp:ListBox>
</div>
<div class="Fright">
<h3>Personen (Verfügbar) </h3>
<asp:ListBox ID="ListVerfügbar" runat="server" Height="200px" Width="300px" AutoPostBack="true"></asp:ListBox>
</div> </div> <br />
<div class="div1">
<div class="Fleft">
<asp:Button ID="btn_del" runat="server" Text="Entfernen" Height="35px" Width="150" OnClick="btn_del_Click"/>
</div>
<div class="Fright">
<asp:Button ID="btn_add" runat="server" Text="Hinzufügen" Height="35px" Width="150" OnClick="btn_add_Click"/>
</div>
</div>
<h1>Mannschaftsverwaltung - Hinzufügen</h1> <br />
<asp:TextBox ID="txtName" runat="server" Height="25px" Width="200px"></asp:TextBox> <br /> <br />
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Fussball</asp:ListItem>
<asp:ListItem>Tennis</asp:ListItem>
<asp:ListItem>Handball</asp:ListItem>
</asp:DropDownList> <br /> <br />
<asp:Button ID="BtnAdd" runat="server" Text="Hinzufügen" OnClick="Button1_Click" />
</asp:Content>
Будет хорошо, если кто-то может помочь :)
Большое спасибо
ОБНОВЛЕНИЕ: Я решил проблему, изменив высоту Divbox со 100% на 250 пикселей!
.div1 {
background-color: red !important;
width: 800px;
height: 270px;
}
.div2 {
background-color: blue !important;
width: 800px;
height: 50px;
}