محاذاة الأزرار button بجانب بعضها في css align horizontal

Mohammed Hhhh · 17 مارس 2022

السلام عليكم و رحمة الله وبركاته لدي مشكلة في الزرين زر view و delet

اود ان اجعلهما بجانب بعض لا تحت بعضهما البعض كيف اقوم بذلك

و شكرا.......

كود html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/Examples/cssPage.css">
    <title>Examples</title>
</head>

<body>
    <h1>this is my site</h1>
    <table>
        <thead>
            <tr>
                <td>Avatar</td>
                <td>Groub</td>
                <td>Name</td>
                <td>Points</td>
                <td>Control</td>
            </tr>
        </thead>
        <tbody>
        <!-- 1 -->

            <tr class="one">
                <td><img src="../Html Required/python.png" alt=""></td>
                <td>Python Programmer</td>
                <td>Osama Issa</td>
                <td>120</td>
                <td class="control">
                    <button>    View </button>
                    <button class="two"> Delet </button>
                </td>
            </tr>
        <!-- 2 -->

            <tr class="one">
                <td><img src="../Html Required/js.png" alt=""></td>
                <td rowspan="2">Java Script and Python Programmers</td>
                <td>Hamed mahmoud</td>
                <td>180</td>
                <td class="control">
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        <!-- 3 -->
            <tr class="one">
                <td><img src="../Html Required/python.png" alt=""></td>
                
                <td>Khaled abd alrhman</td>
                <td>130</td>
                <td class="control">
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        <!-- 4 -->
            <tr class="one">
                <td><img src="../Html Required/js.png "></td>
                <td>Java Script Programmer</td>
                <td>kmal rmadan</td>
                <td>140</td>
                <td class="control">
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        <!-- 5 -->
            <tr class="one">
                <td><img src="../Html Required/js.png" alt=""></td>
                <td>Java Script Programmer</td>
                <td>Adel Youef</td>
                <td rowspan="2">190</td>
                <td>
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        <!-- 6 -->
            <tr class="one">
                <td><img src="../Html Required/js.png" alt=""></td>
                <td>Python Programmer</td>
                <td>Amr mohammed</td>
                
                <td >
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        </tbody>

    </table>
</body>

</html>

كود css

body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}

h1{
    font-size: 80px ;
    text-align: center ;
}

table{
    height: 400px ;
    width: 700px ;
    margin: 20px auto ;
    /* background-color: rgb(243, 243, 243); */
    /* border: solid rgb(197, 197, 197) 3px ; */
    text-align: center ;
    font-size: 20px ;
}

thead{
    background-color: rgb(92, 92, 92) ;
    border-color: red ;
    font-weight : bold ;
    color: rgb(255, 255, 255);
}

.one{
    background-color: rgb(223, 223, 223);
}
td{
    padding: 17px ;
    margin : 8px ; 
    /* border: 0.5px solid rgb(214, 214, 214); */
}

button{
    background-color: rgb(255, 41, 148);
    border: none;
    color: white;
    padding: 1px;
    margin: -1px;
    width: 34px;
    border-radius: 3px ;
    cursor: cell;
}
.two{
    background-color: rgb(48, 145, 255) ;

}

تم التعديل في 17 مارس 2022 بواسطة Wael Aljamal
توضيح السؤال

محمد أبو عواد · 17 مارس 2022

حاول احاطتهما بحاوية لها تنسيق display وقيمته flex كالتالي

<td class="control">
  <div style="display:flex">
    ^^^^^^^^^^^^^^^^^^^^^^^
    <button>عرض</button>
    <button>حذف</button>
  </div>
  ^^^^^^^^
</td>

وأخبرنا بالنتيجة

Wael Aljamal · 17 مارس 2022

يمكنك استخدام التالي كعنصرين إدخال input:

<div>
	<input type="button" value="button1" class="app-button" />
  	<input type="button" value="button2" />
</div>

و التنسيق:

div { 
  padding: 10px;
  border: 1px solid black;
}

input { 
	margin: 0;
}

.app-button:first-of-type {
    margin-right:15px;
 }

آخر تنسيق لإبعاد الزرين عن بعضهما

محاذاة الأزرار button بجانب بعضها في css align horizontal

السؤال

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

محمد أبو عواد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية