登录 | 注册 | FAQ
Anonymous

ul wie andere elemente links floaten

+ 发表回复

4 篇帖子 分页: 1 / 1


ul wie andere elemente links floaten

yxyx136 » 周四 11月 08, 2012 4:50 pm

Hallo ich habe ein Problem mit der CSS Positionierung:

Ich habe mir eine einfache lokale Website erstellt mit einfachem Login-System und User Verwaltung

Nun habe ich eine unordered list hinzugefügt mit float: left. als Account Optionen.
Mein Problem ist das die Liste nicht wie die anderen Elemente hintereinander positioniert wird sondern darunter.
Mein Ziel ist es die ul rechts oben in dem div zu zentrieren.

Hier mein HTML Code für die ul:

代码: 全选
<ul id="Account_Options"><p id="Account_Options_label" onclick="Show_li()">Edit</p>
         <form name="viewProfile" method="POST" action="viewProfile.php"><li id="Account_Options_view" onclick="javascript:document.viewProfile.submit();">View&nbsp;Profile</li></form>
         <form name="editProfile" method="POST" action="editProfile.php"><li id="Account_Options_edit" onclick="javascript:document.editProfile.submit();">Edit&nbsp;Profile</li></form>
         <form method="POST" action="Logout.php"><li id="Account_Options_logout" name="submit"><button name="submit" id="submit" type="submit"><img src="resources/Logout_button.png" /></button></li></form>
      </ul>


...und hier mein CSS Code für die ul:
代码: 全选
#Account_Options {
   float: left;
   list-style: none;
   display: inline;
   position: relative;
   margin-left: 20em;
   margin-right: 1em;
   border: 0.2em solid black;
   padding: 0.1em;
   cursor: pointer;
   background-color: gray;
}

#Account_Options form {
   background-color: silver;
   border: 0.1em solid black;
   position: relative;
}


Ich hoffe ihr könnt mir helfen!

最后由 yxyx136 编辑于 周六 11月 24, 2012 11:01 pm,总共编辑了 1 次

头像

yxyx136

  • 帖子: 4
  • 注册: 周四 11月 08, 2012 4:37 pm

Re: ul wie andere elemente links floaten

XainPro » 周五 11月 09, 2012 9:22 am

fügen Sie einen neuen div nach ul-Menü und geben ihm einen css Stil clear: both
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: ul wie andere elemente links floaten

yxyx136 » 周五 11月 09, 2012 1:17 pm

Danke für die schnelle Antwort! funktioniert trotzdem irgendwie nicht!
habe auch versucht den div in das ul zu stecken; funktioniert leider auch nicht.

alle anderen Elemente wie Profil-Bild und Username konnte ich mit float: left anordnen.
Nur eben die unordered list nicht!
头像

yxyx136

  • 帖子: 4
  • 注册: 周四 11月 08, 2012 4:37 pm

Re: ul wie andere elemente links floaten

XainPro » 周日 11月 11, 2012 7:21 am

ungeordnete Liste Standardwerte haben padding entfernen meinen mit CSS-Reset
in CSS-Datei hinzufügen, um dieses Skript oben
代码: 全选
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm


+ 发表回复

分页: 1 / 1